|
|
@@ -2,8 +2,8 @@
|
|
|
* @see Model.url
|
|
|
*/
|
|
|
$(function () {
|
|
|
- const onChange = (...args) => {
|
|
|
- console.log('On change', args, TodoItem);
|
|
|
+ const onChange = (change, x) => {
|
|
|
+ console.log('On change', change.changed);
|
|
|
};
|
|
|
|
|
|
|
|
|
@@ -14,10 +14,21 @@ $(function () {
|
|
|
},
|
|
|
|
|
|
urlRoot: '/server/todos',
|
|
|
- });
|
|
|
|
|
|
-
|
|
|
- const todoItem = new TodoItem({ id: 1 });
|
|
|
+ toggleStatus(view) {
|
|
|
+ if (this.get('status') === 'incomplete') {
|
|
|
+ this.set('status', 'complete');
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.set('status', 'incomplete');
|
|
|
+ }
|
|
|
+ this.save();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
+
|
|
|
+ todoItem = new TodoItem({ id: 1 });
|
|
|
|
|
|
|
|
|
todoItem.on('change', onChange);
|
|
|
@@ -58,15 +69,46 @@ $(function () {
|
|
|
className: 'todo',
|
|
|
|
|
|
|
|
|
- template: _.template('<h3><%= description %></h3>'),
|
|
|
+
|
|
|
+ template: _.template(`
|
|
|
+<h3 class="<%= status %>">
|
|
|
+ <input type="checkbox"
|
|
|
+ <% if (status === "complete") print("checked") %> />
|
|
|
+ <%= description %>
|
|
|
+</h3>
|
|
|
+`),
|
|
|
+
|
|
|
|
|
|
events: {
|
|
|
|
|
|
'click h3': 'alertStatus',
|
|
|
+
|
|
|
+ 'change input': 'toggleStatus',
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ initialize() {
|
|
|
+
|
|
|
+ this.model.on('change', this.render, this);
|
|
|
+
|
|
|
+
|
|
|
+ this.model.on('destroy', this.remove, this);
|
|
|
},
|
|
|
|
|
|
+
|
|
|
+ remove() {
|
|
|
+ this.$el.remove();
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
alertStatus() {
|
|
|
- alert('Hey, you clicked the H3');
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ toggleStatus() {
|
|
|
+ this.model.toggleStatus();
|
|
|
},
|
|
|
|
|
|
render: function () {
|
