RivetsJS Array Binding

by mrrodd

HTML

<script src="https://rawgithub.com/mikeric/rivets/v0.6.3/dist/rivets.min.js"></script>
<section id="event-list">
  <button rv-on-click="data.push">push()</button>
  <button rv-on-click="data.pop">pop()</button>
  <button rv-on-click="data.shift">shift()</button>

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

JavaScript

data = {
  events: [],
    
  push: function(ev, scope) {
    scope.data.events.push({
      name: 'event #' + Math.floor((Math.random() * 1000)),
      data: 'Here is some data.'
    })
  },
    
  pop: function(ev, scope) {
    scope.data.events.pop()
  },
    
  shift: function(ev, scope) {
    scope.data.events.shift()
  }
}

el = document.getElementById('event-list')
rivets.bind(el, {data: data})