events - 订阅带有铆钉的数组

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'）？

score 1 · Accepted Answer

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

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

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

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

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

1 回答 1