EmberJs中Checkbox的SelectionBinding

时间:2012-04-30 12:41:27

标签: checkbox ember.js

Emberjs是否为复选框提供了selectionBinding来处理选中/选中的复选框选项。

如果是,该怎么做?

2 个答案:

答案 0 :(得分:10)

绑定到checked的{​​{1}}属性,请参阅http://jsfiddle.net/5pnVg/

<强>车把

Ember.Checkbox

<强>的JavaScript

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

答案 1 :(得分:0)

好的,所以这有点老了,但我也偶然发现了这一点。我将复选框选项传递给数组中的路径模型。问题实际上是实现双向绑定(如果这是目标)。这就是我做到的:

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

所以我在这里设置属性以根据它们在模型的形状数组中的存在来设置它们,并设置一个观察器来检查这些属性以在需要时重置模型的形状数组。 现在在Item模板中,我们可以像往常一样绑定到形状上(不管你这样做):

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

在ItemEdit模板中,我们绑定到编辑控制器的属性:

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

希望这可以帮助任何努力使用此类手动双向绑定的人,并且您可以一次性获得模型中所有选中的选项。