訂閱鉚釘陣列

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/