在Backive.js的Rivets.js中使用自定义绑定器时,向按钮添加"无线电"功能

Question

我正在使用Rivets.js将元素绑定到我的模型.我正在使用Twitter的Bootstrap进行设计,并设置了三个按钮,可以从值1,2和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,因此我不必在Backbone视图中的表单中为每个按钮组添加一个click事件.

这是Rivets中的基本功能,如果是,我该如何设置它？

Answer 1

在研究了 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.