Simple list data-binding utility idea

index.html

<div class="todo-list">
  <div class="todo">
    <input type="checkbox" class="done">
    <h3 class="title">Title</h3>
  </div>
</div>

index.js

const todoBinder = bindToChildren({
  element: document.querySelector(".todo-list"),
  key: (value) => value.id,
  // called on first insertion
  onAdd: (elem, value) => {
    return new TodoController(elem);
  },
  // called on data update
  onUpdate: (elem, value, controller) => {
    controller.setTodo(value);
  },
  // called on removal
  onRemove: (elem, value, controller) => {
    controller.dispose();
  }
});

binder.values = [
  {title: "Task", done: false, id: 0},
  {title: "Another Task", done: true, id: 1},
];
binder.values = [
  {title: "Task", done: true, id: 0},
  {title: "Another Task", done: true, id: 1},
  {title: "New Task", done: false, id: 2},
];