5

我正在使用 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 视图的表单中为每个按钮组添加点击事件。

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

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 回答