forked from tastejs/todomvc
/
views.js
121 lines (93 loc) · 3.2 KB
/
views.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
var todo = window.todo || {};
(function( window ) {
'use strict';
var ENTER_KEY = 13;
todo.TodoListView = soma.View.extend({
template: null,
init: function() {
this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$( this.domElement ).on( 'click', '.destroy', this.destroy.bind( this ) );
$( this.domElement ).on( 'click', '.toggle', this.toggle.bind( this ) );
$( this.domElement ).on( 'dblclick', 'label', this.edit );
$( this.domElement ).on( 'blur', '.edit', this.update.bind( this ) );
$( this.domElement ).on( 'keypress', '.edit', this.blurInput );
$('#toggle-all').click( this.toggleAll );
},
render: function( data, activeCount ) {
$(this.domElement).html( this.template( data ) );
$('#toggle-all').prop( 'checked', !activeCount );
$('#main').toggle( !!data.length );
},
destroy: function( event ) {
var id = $(event.target).closest('li').attr('data-id');
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.DELETE, null, id ) );
},
toggle: function( event ) {
var id = $(event.target).closest('li').attr('data-id');
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.TOGGLE, null, id ) );
},
toggleAll: function() {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.TOGGLE_ALL, null, null, $( this ).prop('checked') ) );
},
edit: function( event ) {
$( this ).closest('li').addClass('editing').find('.edit').focus();
},
update: function( event ) {
var li = $( event.target ).closest('li').removeClass('editing'),
id = li.data('id'),
val = li.find('.edit').val().trim();
if ( val ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.UPDATE, val, id ) );
}
else {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.DELETE, null, id ) );
}
},
blurInput: function( event ) {
if ( event.which === ENTER_KEY ) {
event.target.blur();
}
}
});
todo.TodoListView.NAME = 'TodoListView';
todo.TodoInputView = soma.View.extend({
init: function() {
$( this.domElement ).keypress( this.keyPressHandler.bind( this ) );
$( this.domElement ).blur( this.blur );
},
keyPressHandler: function( event ) {
if ( event.which === ENTER_KEY ) {
this.createItem();
}
},
createItem: function() {
var value = this.domElement.value.trim();
if ( value ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CREATE, value ) );
}
this.domElement.value = '';
},
blur: function( event ) {
if ( !this.value.trim() ) {
this.value = '';
}
}
});
todo.TodoInputView.NAME = 'TodoInputView';
todo.FooterView = soma.View.extend({
template: null,
init: function() {
this.template = Handlebars.compile( $( '#' + this.domElement.id + '-template' ).html() );
$( this.domElement ).on( 'click', '#clear-completed', this.clearCompleted.bind( this ) );
},
render: function( data ) {
$( this.domElement ).html( this.template( data ) );
$( this.domElement ).toggle( !!data.length );
$('#clear-completed').toggle( !!data.completed );
},
clearCompleted: function( event ) {
this.dispatchEvent( new todo.TodoEvent( todo.TodoEvent.CLEAR_COMPLETED ) );
}
});
todo.FooterView.NAME = 'FooterView';
})( window );