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。

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

1 个答案: