मुझे सूची के लिए चयन स्थिति कहां रखना चाहिए?

Question

मैं एम्बर 1.0.0-प्री 4 का उपयोग कर रहा हूं।

मैं मॉडल उदाहरणों की एक सूची प्रदर्शित करना चाहता हूं। उपयोगकर्ता प्रत्येक पंक्ति में प्रदान किए गए बटन या चेकबॉक्स पर क्लिक करके कई सूची प्रविष्टियों का चयन करने में सक्षम होना चाहिए।

मैं सूची प्रदर्शित करने में कामयाब रहा। लेकिन मुझे नहीं पता कि चयन स्थिति का प्रबंधन कैसे करें। जब मैं टेम्पलेट में {{view Ember.Checkbox checkedBinding="isSelected"}} की तरह कुछ डालता हूं तो चयन स्थिति मेरे मॉडल में आयोजित की जाएगी। लेकिन मुझे नहीं लगता कि यह सबसे अच्छी जगह है। मुझे लगता है कि चयन स्थिति नियंत्रक से संबंधित है या राज्य को देखते हैं।

क्या आप कृपया मुझे स्टोर चयन स्थिति (एकाधिक) स्टोर और एक्सेस करने का सबसे अच्छा तरीका बता सकते हैं?

Answer 1

एक तरह से बस नियंत्रक में एक दूसरी सूची रखने के लिए है:

App.FooController = Ember.ArrayController.create({ 
    selectedContent: [], 
    selectToggle: function(event) { 
    var selectedContent; 
    selectedContent = this.get(selectedContent); 
    if (selectedContent.contains(event.context)) { 
     return this.set('selectedContent', selectedContent.without(event.context)); 
    } else { 
     return this.get('selectedContent').push(event.context); 
    } 
    } 
}); 

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each foo in controller}} 
      <li {{action selectToggle foo}}>{{foo.name}}</li> 
    {{/each}} 
    </ul> 
</script> 

कि बस नियंत्रक में एक अलग सूची रखता है और धक्का/पर किया जाए या नहीं आइटम का चयन किया गया था आधारित हटाता है।

आप "ऑब्जेक्टेड" संपत्ति के साथ foo ऑब्जेक्ट के मानों को बढ़ाने के लिए Ember.ObjectProxy का भी उपयोग कर सकते हैं।

App.FooController = Ember.ArrayController.create({ 
    selectedContent: @get('content').map(function(item){ 
    Ember.ObjectProxy.create({ 
     content: item 
     isSelected: false 
    }); 
    }); 
}); 

<script type="text/x-handlebars" data-template-name="index"> 
    <ul> 
    {{#each foo in controller.selectedContent}} 
      <li {{bindAttr class= "foo.isSelected"}}{{action selectToggle foo}}>{{foo.name}}</li> 
    {{/each}} 
    </ul> 
</script> 

फिर अपनी चुनिंदा टॉगल विधि में आप बस foo की चुनी गई संपत्ति को उचित रूप से सेट करें।