Simulacra.js example using AJAX loaded data

simulacra.index.html

<template id="tasks">
  <h3 class="header"></h3>
  <ul>
    <li class="task"></li>
  </ul>
</template>
<div id="app">
  <!-- the rendered content will be thrown in here -->
</div>

simulacra.index.js

// this assumes you have included simulacra.js
var bind = window.simulacra;

var fragment = document.getElementById('tasks').content;

// simple wrapper for finding the elements by class
window.$ = function(selector) {
  return fragment.querySelector(selector);
};

var bindings = bind(fragment, {
  header: bind($('.header')),
  tasks: bind($('.task'))
});

// may require the whatwg-fetch polyfill
fetch('tasks.json')
.then(function(response) {
  return response.json();
}).then(function(res) {
  var output = bind(res.data, bindings);
  // throw in the rendered content
  document.getElementById('app').appendChild(output);
}).catch(function(err) {
  console.error(err);
});

simulacra.tasks.js

{
  "data": {
    "header": "My Task List",
    "tasks": [
      "Task 1",
      "Task 2",
      "Task 3",
      "Task 4",
      "Task 5",
      "Task 6",
      "Task 7",
      "Task 8",
      "Task 9",
      "Task 10",
      "Task 11",
      "Task 12",
      "Task 13",
      "Task 14",
      "Task 15",
      "Task 16",
      "Task 17",
      "Task 18",
      "Task 19",
      "Task 20"
    ]
  }
}

It would be nice to store res.data somewhere so that the list can be mutated :)