Seçme EmberJs'de Onay Kutusu

Question

Emberjs, seçili/işaretli onay kutusu seçeneklerini işlemek için onay kutusunun selectionBinding öğesini sağlar.

Evet ise nasıl yapılır?

Gidon:

{{view Ember.Checkbox checkedBinding="App.objController.isChecked" }} 

JavaScript:

Answer 1

Ember.Checkbox ait checked özelliğine Bind, http://jsfiddle.net/5pnVg/ bkz

App.objController = Ember.Object.create({ 
    isChecked: true, 

    _isCheckedChanged: function(){ 
     var isChecked = this.get('isChecked'); 
     console.log('isChecked changed to %@'.fmt(isChecked)); 
    }.observes('isChecked') 
});​ 

Answer 2

Tamam, yani bu tür eski ama Bunun üzerine de tökezledi. Bir dizideki rota modeline teslim edilen onay kutusu seçeneklerim vardı. Sorun gerçekten iki yönlü bağlanma ile (eğer hedef ise). Bu benim bunu yaptık nasıl:

App.ItemEditController = Ember.ObjectController.extend({ 
isRound: function() { 
    return (this.get('model.shapes').find(function(item) { return (item === 'round') })); 
}.property('model.shapes'), 
isOval: function() { 
    return (this.get('model.shapes').find(function(item) { return (item === 'oval') })); 
}.property('model.shapes'), 
isIrregular: function() { 
    return (this.get('model.shapes').find(function(item) { return (item === 'irregular') })); 
}.property('model.shapes'), 
shapes: function() { 
    var self = this; 
    ['round','oval','irregular'].map(function(item) { 
     var shapes = self.get('model.shapes'); 
     shapes = shapes.toArray(); 
     if (self.get('is' + item.capitalize())) { 
      if (shapes.indexOf(item) < 0) 
       shapes.push(item); 
     } else { 
      if (shapes.indexOf(item) >= 0) 
       shapes.splice(shapes.indexOf(item),1); 
     } 
     self.set('model.shapes', shapes); 
    }); 
}.observes('isRound', 'isOval', 'isIrregular') 
}); 

Yani burada ben modelin şekilleri dizisinde kendi varlığına dayanarak kendilerini ayarlamak ve modelin şekiller dizi sıfırlar için bu özellikleri denetleyen bir gözlemci ayarlamak için özellikler kurulum ettik Eğer gerekirse.

Shapes: 
{{#each shape in this.shapes}} 
    <span class="label label-default">{{shape}}</span><br /> 
{{else}} 
    No shape selected! 
{{/each}} 

ve ItemEdit şablonda düzenlemenin orijinal kontrolörün özelliklere bağlanmak: biz her zaman yaptığımız gibi (yapmanız ancak) Şimdi Öğe şablonunda biz şekillere bağlayabilir

Shapes: 
Round: {{input type="checkbox" checked=isRound}} 
Oval: {{input type="checkbox" checked=isOval}} 
Irregular: {{input type="checkbox" checked=isIrregular}} 

Umut Bu, bu tür manuel iki yönlü ciltleme ile mücadele eden kişilere yardımcı olur ve tek bir seferde modelinizdeki tüm işaretli seçeneklerinizi elde edersiniz.