checkbox - EmberJsのチェックボックスのSelectionBinding

Question

Emberjsは、選択/チェックされたチェックボックスオプションを処理するためのチェックボックスのselectionBindingを提供しますか？

はいの場合、それを行う方法は？

Answer 1

checkedのプロパティにバインドします。 http://jsfiddle.net/5pnVg/Ember.Checkboxを参照してください。

ハンドルバー:

{{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

さて、これはちょっと古いですが、私もこれに出くわしました。チェックボックスのオプションを配列でルートのモデルに配信しました。問題は、実際には双方向バインディングを実現することです (これが目標である場合)。これが私がやった方法です：

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}}

これが、このタイプの手動の双方向バインディングに苦労している人の助けになり、モデルでチェックされたすべてのオプションを一度に取得できることを願っています.