relift-example-todo.html

relift-example-todo.html

<div>
  <div class="column" id="todoAppWidget" style="display:none">
    <div class="center">
      <div>Enter your item</div>
      <input type="text" id="todo-input" />
      <button @click="add">Save</button>
    </div>
    <div>
      <ul>
        <li r-for="item,i in this.todos">
          ${item} <a @click="remove" data-index="${i}">Remove</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<script type="module">
  import reLift from '../src/index.js';
  
  reLift({
    el: '#todoAppWidget',
    data: {
      todos: [  
        'Take dog to school', 
        'Eat dinner', 
        'Code more'
      ],
    },
    add() {
      const input = this.el.querySelector('#todo-input');
      if (input.value) {
        this.data.todos.push(input.value);
      }
    },
    remove(e) {
      const index = parseInt(e.target.getAttribute('data-index'));
      this.data.todos.splice(index, 1);
    },
});

</script>