3

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

参考资料：使用 Backbone.js 和 Rivets.js 的简单示例

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

来自 Rivets.js 网站

迭代绑定

即使每个项目的绑定例程可能包含在 Rivets.js 中，您也可以在中间使用 data-html 绑定以及一组格式化程序来对集合进行排序和迭代渲染（以及其他很酷的事情）。

<ul data-html="model.tags | sort | tagList"></ul>
4

4 回答 4

3

扩展这个答案：

从 0.3.2 开始，现在有一个 data-each-[item] 绑定正是为了这个目的。

请注意，您需要专门修改您的 Rivets适配器以使用 Backbone 集合，因为 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

于 2012-10-13T19:30:34.480 回答
2

从0.3.2开始，现在有一个data-each-[item] 绑定正是为了这个目的。

<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 | itemListitemList 格式化程序只是在数组上循环并返回一些呈现的 HTML .

rivets.formatters.itemList = (array) ->
  ("<li>#{item.name}</li>" for item in array).join ''
于 2012-08-11T02:07:57.810 回答
1

UnderscoreJS集成在 Backbone 中，因此您可以使用其原生方法，如_.each()或使用集成的 Backbone Collection 下划线方法。

这就是你要找的吗？

于 2012-08-07T23:12:56.167 回答
0

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 读取您的收藏和模型。

于 2013-05-08T00:32:20.910 回答