events - リベットを使用してアレイをサブスクライブする

Question

次のオブジェクト Data があるとします。

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 が on('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