订阅带铆钉的阵列

Question

假设我有以下对象数据：

Data.events = []
Data.push = function() {
  this.events.push(arguments);
  this.emit('push')
}

我想将Data.events数组绑定到列表：

<ol>
  <li data-each-event="events">
    <h1 data-text="event.name"></h1>
    <p data-text="event.data"></p>
  </li>
</ol>

如何配置我的适配器以便DOM更新（'push'）？

Answer 1

从0.6.0开始，Rivets.js附带了一个非常灵活的适配器，可以观察普通对象属性以及数组突变。假设您有以下模板。

<ol>
  <li rv-each-event="data.events">
    <h1>{ event.name }</h1>
    <p>{ event.data }</p>
  </li>
</ol>

在调用rivets.bind时直接传入纯JavaScript对象。

data.events = []
rivets.bind(el, {data: data})

这是一个JSFiddle，它演示了这个开箱即用的工具（请注意，这仅适用于ES5浏览器，但您可以使用具有所需浏览器支持的内容覆盖内置适配器。）

http://jsfiddle.net/S6M7k/