function TodoView(options) {
owl.View.call(this, {
className: 'v-todo',
// you can use any templating engine here
template: function(data) {
return (
'<form>' +
'<h1>Todo list</h1>' +
'<input type="text" data-element="title" placeholder="Add a task" />' +
'<div data-element="counter" class="v-todo--counter"></div>' +
'</form>' +
'<div data-element="items"></div>' +
'<div data-element="count"></div>'
);
},
events: {
'keyup $title': 'keyup',
'submit form': 'submit'
},
collection: options.collection
});
this.templateCount = function(data) {
return (
'<div class="v-todo--count">' +
data.countLeft + ' items left' +
'</div>'
);
};
// update links to data-element
// and update special events (submit, focus, blur)
this.render();
this.initListeners();
}
function AppView() {
owl.View.call(this, {
el: document.querySelector('html')
});
// update links to data-element
// and update special events (submit, focus, blur)
this.update();
}