SelectionBinding for Checkbox trong EmberJs

Question

Does Emberjs cung cấp lựa chọnXóa hộp kiểm để xử lý các tùy chọn hộp kiểm đã chọn/đã chọn.

Nếu có, cách thực hiện?

Answer 1

Bind đến checked tài sản của Ember.Checkbox, xem http://jsfiddle.net/5pnVg/:

tay lái:

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

Javascript:

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

Được rồi, vì vậy đây là kinda cũ nhưng tôi stumbled khi điều này quá. Tôi đã có các tùy chọn hộp kiểm được gửi đến mô hình của tuyến đường trong một mảng. Vấn đề thực sự là với việc đạt được hai cách ràng buộc (nếu đây là mục tiêu). Đây là cách tôi đã thực hiện nó:

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') 
}); 

Vì vậy, ở đây tôi đã thiết lập các thuộc tính để thiết lập bản thân dựa trên sự hiện diện của họ trong mảng hình dạng của mô hình và thiết lập một quan sát viên để kiểm tra các đặc tính này để reset mảng hình dạng của mô hình nếu được yêu cầu. Bây giờ trong mục template chúng ta có thể liên kết với các hình dạng như chúng ta luôn luôn làm (tuy nhiên bạn làm):

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

và trong mẫu ItemEdit chúng tôi liên kết với thuộc tính chỉnh sửa điều khiển của:

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

Hope điều này giúp với bất kỳ ai đấu tranh với loại liên kết hai chiều thủ công này và bạn sẽ nhận được tất cả các tùy chọn đã kiểm tra trong mô hình của mình trong một lần.