Bir liste için seçim durumunu nerede tutmalıyım?

Question

Ember 1.0.0-pre4 kullanıyorum.

Model örneklerinin listesini görüntülemek istiyorum. Kullanıcı, her satırda oluşturulan bir düğmeyi veya onay kutusunu tıklatarak çok sayıda liste girişi seçebilmelidir.

Listeyi görüntülemeyi başardım. Ama seçim durumunu nasıl yöneteceğimi bilmiyorum. Şablona {{view Ember.Checkbox checkedBinding="isSelected"}} gibi bir şey koyduğumda seçim durumu modelimde tutulacak. Ama bunun en iyi yer olduğunu sanmıyorum. Seçim durumunun denetleyiciye veya görüş durumuna ait olduğunu düşünüyorum.

Lütfen bana (çoklu) liste seçim durumunu depolamanın ve erişmenin en iyi yolunu söyleyebilir misiniz?

Answer 1

bir yolu sadece denetleyici içinde ikinci bir listesini tutmaktır:

sadece denetleyici ayrı listesini tutar ve iter

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> 

/öğe seçildi olsun veya olmasın dayalı kaldırır.

Ayrıca bir "isSelected" özelliği ile foo nesnesinin değerlerini artırmak için bir Ember.ObjectProxy kullanabilirsiniz.

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> 

Sonra selectToggle yönteminizde fo'nun isSelected özelliğini uygun şekilde ayarladınız.