Question

我在Backbone项目中使用Rivets.js进行两次双向数据绑定，并希望实现迭代绑定。文档建议迭代绑定是可能的，但没有可用的示例。我使用一个简单的Rails API将JSON发送到客户端，并希望迭代内容。有没有人在Rivets.js中使用此功能有任何成功？

参考资料：Simple Example using Backbone.js and Rivets.js

jsFiddle这里：http://jsfiddle.net/rhodee/3qcYQ/1/

来自Rivets.js网站

迭代绑定

即使Rivets.js中可能包含每个项目的绑定例程，您也可以   可以在临时使用data-html绑定和一组格式化程序来做   对集合进行排序和迭代渲染（以及其他很酷的事情）。
<ul data-html="model.tags | sort | tagList"></ul>

Answer 1

扩展这个答案：

从0.3.2开始，现在有一个数据 - 每个 - [item]绑定用于此目的。

请注意，您需要专门修改您的铆钉适配器才能使用Backbone Collection，因为Rivets.js网站上的开箱即用示例无法使用此用途情况下。

在rivets.configure({ adapter: ... })：

中，您需要这样的内容

...
read: function( obj, keypath ) {
    return obj instanceof Backbone.Collection 
       ? obj["models"] 
       : obj.get(keypath)
}

JS小提琴：http://jsfiddle.net/tigertim719/fwhuf/70/

对于奖励积分，模型中嵌入的集合将需要在您的适配器中进行额外处理。

有关更多信息，请查看有关Rivets.js Github问题的帖子：
Binding to Backbone.Collection with the data-each- binding

Answer 2

从 0.3.2 开始，现在有一个data-each-[item] binding用于此目的。

<ul>
  <li data-each-todo="list.todos">
    <input type="checkbox" data-checked="todo.done">
    <span data-text="todo.summary"></span>
  </li>
<ul>

对于以前版本的Rivets.js，您提到的解决方法是使用格式化程序实现迭代渲染 - 例如，您将data-html与model.items | itemList绑定itemList格式化程序只是遍历数组并返回一些呈现的HTML。

rivets.formatters.itemList = (array) ->
  ("<li>#{item.name}</li>" for item in array).join ''

Answer 3

UnderscoreJS已集成在Backbone中，因此您可以使用其{@ 3}}等原生方法或使用_.each()。

这是你要找的吗？

Answer 4

cayuu的回答是正确的。但是小提琴中的rivets.js参考不起作用，因此结果不显示。

查看以下版本以查看操作。

http://jsfiddle.net/tigertim719/fwhuf/70/

rivets.configure({
  adapter: {
    subscribe: function(obj, keypath, callback) {
      obj.on('change:' + keypath, callback);
    },
    unsubscribe: function(obj, keypath, callback) {
      obj.off('change:' + keypath, callback);
    },
    read: function(obj, keypath) {
        return obj instanceof Backbone.Collection ? obj["models"] : obj.get(keypath);
    },
    publish: function(obj, keypath, value) {
      obj.set(keypath, value);
    }
  }
});

最重要的部分是

read: function(obj, keypath) {
            return obj instanceof Backbone.Collection ? obj["models"] : obj.get(keypath);
        },

告诉铆钉如何从Backbone读取您的收藏和模型。

使用Rivets.js迭代一组Backbone.js模型？

迭代绑定

4 个答案: