迭代使用Backbone.js的Rivets.js模型的集合？ [英] Iterate over a collection of Backbone.js models using Rivets.js?

问题描述

我使用 Rivets.js 两个双向数据中的骨干项目绑定和想实现迭代绑定。文档建议迭代结合是可能的，但有没有可用的例子。我使用的是简单的Rails API发送JSON给客户，并希望遍历的内容。有没有人有任何成功获得此功能在Rivets.js工作？

参考资料：<一href=\"http://stackoverflow.com/questions/11719914/simple-example-using-backbone-js-and-rivets-js\">Simple使用Backbone.js的和Rivets.js 示例

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

从Rivets.js网站

  

迭代绑定

  
  

即使为每个项目的结合例程可能会被包含在Rivets.js，则
  可以使用该数据的HTML中的临时与一组格式化的结合一起做
  分类和收藏反复渲染（除其他很酷的事情）。

 ＆LT; UL数据的HTML =model.tags |排序|标记列表＆GT;＆LT; / UL＆GT;
 

解决方案

由于 0.3.2 现在有一个的数据每名─[项目]结合出于这样的目的。

 ＆LT; UL＆GT;
  ＆LT;李的数据每个-待办事项=list.todos＆GT;
    ＆LT;输入类型=复选框数据检查=todo.done＆GT;
    ＆LT;跨度数据文本=todo.summary＆GT;＆LT; / SPAN＆GT;
  ＆LT; /李＆GT;
＆LT; UL＆GT;
 

有关Rivets.js的previous版本中，工作周围，您已经提到的是一个格式化来实现迭代渲染 - 例如，你将有一个数据HTML 与 model.items约束力| ITEMLIST 其中ITEMLIST格式化只是循环数组结束，返回一些呈现的HTML。

  rivets.formatters.itemList =（阵列） -  GT;
  （＆LT;立GT;＃{item.name}＆LT; /李＆gt;中对数组项）。加入''
 

I'm using Rivets.js for two two-way data binding in a Backbone project and would like to implement iteration binding. The documentation suggests iteration binding is possible, but there are no examples available. I am using a simple Rails API to send JSON to the client and want to iterate over the contents. Has anyone had any success getting this functionality working in Rivets.js?

Reference material: Simple Example using Backbone.js and Rivets.js

jsFiddle here: http://jsfiddle.net/rhodee/3qcYQ/1/

From the Rivets.js site

Iteration Binding

Even though a binding routine for each-item will likely be included in Rivets.js, you can use the data-html binding along with a set of formatters in the interim to do sorting and iterative rendering of collections (amongst other cool things).

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

解决方案

As of 0.3.2 there is now a data-each-[item] binding for exactly this purpose.

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

For previous versions of Rivets.js, the work-around that you've referred to is to implement the iterative rendering with a formatter — for example you would have a data-html binding with model.items | itemList where the itemList formatter just loops over the array and returns some rendered HTML.

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

这篇关于迭代使用Backbone.js的Rivets.js模型的集合？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！