5

Rivets.jsを使用して要素をモデルにバインドしています。私はデザインにTwitterのBootstrapを使用しており、値1、2、3から選択するための3つのボタンを設定しました（機能的にはラジオボタンと同等です）。

次のようなボタングループに3つのボタンを設定しました。

<div class="btn-group" id="input_level" data-toggle="model.level">
    <button data-toggle-value="1" class="btn active">One</button>
    <button data-toggle-value="2" class="btn">Two</button>
    <button data-toggle-value="3" class="btn">Three</button>
</div>

toggle私は次のようなカスタムバインダーを追加しました：

rivets.binders.toggle = function(el,value){
    $(el).find('button[data-toggle-value="' + value + '"]')
        .addClass('active').siblings().removeClass('active');
}

これにより、ボタンの状態が正常に更新されますが、他の方法では機能しません。つまり、ボタンクリックイベントにバインドされたイベントはありません。これをRivets.jsに一般化して、バックボーンビューのフォームの各ボタングループにクリックイベントを追加する必要がないようにします。

これはリベットの基本的な機能ですか？もしそうなら、どのように設定しますか？

4

1 に答える 1

4

Rivets.js の注釈付きソースを調べた後、しばらくして解決策を見つけました (私は CoffeeScript を使用していないため、読むのが少し面倒でした)。

質問の元のコードのこの部分を置き換えました：

rivets.binders.toggle = function(el,value){
    $(el).find('button[data-toggle-value="' + value + '"]')
        .addClass('active').siblings().removeClass('active');
}

これとともに：

rivets.binders.toggle = {
    publishes: true,
    bind: function(el){
        $(el).on('click', 'button:not(.active)', _.bind(function(e){
            this.model.set(this.keypath, $(e.currentTarget).data('toggle-value'));
        }, this));
    },
    unbind: function(el){
        $(el).off('click', 'button:not(.active)');
    },
    routine: function(el,value){
        $(el).find('button[data-toggle-value="' + value + '"]')
            .addClass('active').siblings().removeClass('active');
    }
};

初期コードはrivets.binders.toggle.routineではなく下になりrivets.binders.toggleました。

于 2012-12-10T10:21:25.680 に答える