Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.