Rivets.js iterating over collection

Question

I was trying to perform iteration binding in Rivets.js as described in the documentation. However it seems that no binding occurs.

The template is defined as follows:

<section id="rivets">
  <ul>
    <li data-each-todo="list.todos">
      <input type="checkbox" data-checked="todo.done">
      <span data-text="todo.summary"></span>
    </li>
  <ul>
</section>

The binding is performed by:

var model = {
  list: {
    todos: [
      { done: true, summary: "Todo 1" },
      { done: false, summary: "Todo 2" }
    ]
  }
}
rivets.bind(document.getElementById('rivets'), model)

I have created a fiddle for this issue. What am I missing?

Answer 1

My bad - the first paragraph of Rivets.js documentation made me use wrong name of Rivets.js attributes (data- instead of rv-).