<!--
In Vue, we use v-model for all form bindings, while
Knockout maintains separate binding types, such as
textInput, checked, and options. In some cases,
such as for an input of type "range", Knockout
simply doesn't have an equivalent two-way binding
helper and the more verbose value and valueUpdate
must be used.
-->
<div id="app">
  <input data-bind="textInput: newTodoText, event: { keypress: addTodo }">
  <ul data-bind="foreach: todos">
    <!--
    Inside of the foreach, a new scope is implicitly
    created and we must reference $parent or $root to
    access other scopes. In contrast, Vue maintains
    the root scope and allows you to explicitly name
    any nested scopes, so that it's always clear
    what data you're accessing.
    -->
    <li>
      <span data-bind="text: title"></span>
      <button data-bind="event: { click: $root.removeTodo }">
        X
      </button>
    </li>
  </ul>
</div>