`),
events: {
// Generates this.$el.('h3", 'click', alertStatus).
'click h3': 'alertStatus',
'change input': 'toggleStatus',
},
// Backbone.
initialize() {
// Backbone on() takes (event, callback, context)
this.model.on('change', this.render, this);
// Or without an explicit context, use a bound function.
// this.model.on('change', this.render.bind(this));
this.model.on('destroy', this.remove, this);
},
// Handle on destroy.
remove() {
this.$el.remove();
},
// Handle "click h3"
alertStatus() {
// Noisy.
// alert('Hey, you clicked the H3');
},
// Handle "change input".
toggleStatus() {
this.model.toggleStatus();
},
render: function () {
const attributes = this.model.toJSON();
const html = this.template(attributes);
// Since this.el is a DOMElement, we can just wrap it with jQuery instead
// of using a jQuery selector like $('#todo-view') or $('.todo').
// This is better because it is id- and class- independent.
// $(this.el).html(html);
// Backbone even gives a shortcut: the $el property.
this.$el.html(html);
},
});
$(function () {
// Create a view instance.
const todoView = new TodoView({ model: todoItem });
// Build view.
todoView.render();
// console.log(todoView.el);
// Apply to the DOM.
$('#app').html(todoView.el);
});