Controls
Controls 是Constructs的子类,MVC框架中的C.
示例:
var Todos = can.Control({
default:{
age:23,
name: 'sheldon1'
}
},
{
init: function(el, options) {
var self = this;
Todo.findAll({}, function(todos) {
self.element.html(can.view('todoList', todos));
});
}
});
初始化一个Todos的实例如下:
var todosList = new Todos('#todos', {name:'sheldon',age:'27'});
第一个参数可以是选择器,元素,节点列表,这些在init方法中对应第一个参数中的el,此时的el已经是一个元素对象.
第二个参数,options就是传入的json对象和上面提到的defaults里的值进行合并,可以用options.name来取得相对应的值。
Listening to events
Controls 会自动绑定那些看起来像事件的实例方法,如下面实例中的’li click’方法,这些方法传递两个参数,第一个是事件触发的元素,第二个是事件本身.
can.Control使用了事件托管,所以当添加或者移除元素时,不需要重新绑定事件处理。
1. <script type="text/ejs" id="todoList">
2. <% this.each(function(todo) { %>
3. <li <%= (el) -> el.data('todo', todo) %>>
4. <%= todo.attr('description'); %>
5. <a class="destroy">X</a>
6. </li>
7. <% }) %>
8. </script>
Eg1:
1. var Todos = can.Control({
2. init: function(el, options) {
3. var self = this;
4. Todo.findAll({}, function(todos) {
5. self.element.html(can.view('todoList', todos));
6. });
7. },
8. 'li click': function(el, ev) {
9. console.log('You clicked ' + el.text());
10. }
11. });
示例2:
1. var Todos = can.Control({
2. init: function(el, options) {
3. var self = this;
4. Todo.findAll({}, function(todos) {
5. self.element.html(can.view('todoList', todos));
6. });
7. },
8. 'li click': function(el, ev) {
9. console.log('You clicked ' + el.text());
10. },
11. 'li .destroy click': function(el, ev) {
12. var li = el.closest('li'),
13. todo = li.data('todo');
14.
15. todo.destroy();
16. }
17. });
上面示例中当点击li .destroy元素时,调用了model的destory,从模型中删除了该对象,这样会同时把页面的对应的页面元素也删除掉。
Templating event handlers:模板的事件处理程序(有疑问)
如果在event handler中包含一个占位符,can.Control会在Control的options查找对应的占位符key的值,然后在window中查找.
Eg:
var Todos = can.Control({
defaults: {
destroyEvent: 'click'
}
},{
init: function(el, options) {
var self = this;
Todo.findAll({}, function(todos) {
self.element.html(can.view(this.options.view, todos));
});
},
'li .destroy {destroyEvent}': function(el, ev) {
var li = el.closest('li'),
todo = li.data('todo');
todo.destroy();
}
});
new Todos('#todos', {destroyEvent; 'mouseenter'});
Rebinding events
Control可以通过调用on 方法Unbind和rebind所有的Control的event handlers,这个在Control开始监听一个指定的model或者改变监听的model时很常用。
1. var Editor = can.Control({
2. setDesc: function() {
3. this.element.val(this.options.todo.description);
4. },
5. // change what Todo this Control points at
6. todo: function(todo) {
7. this.options.todo = todo;
8. this.on();
9. this.setDesc();
10. },
11. // listen for changes in the Todo
12. '{todo} updated': function() {
13. this.setDesc();
14. },
15. // when the input changes, update the Todo
16. ' change': function(el, ev) {
17. this.options.todo.attr('description', el.val());
18. this.options.todo.save();
19. }
20. });
21. var todo1 = new Todo({id: 7, description: 'Take out the trash.'}),
22. todo2 = new Todo({id: 8, description: 'Wash the dishes.'}),
23. editor = new Editor('#editor');
24. // start editing the first Todo
25. editor.todo(todo1);
26. // switch to editing the second Todo
27. editor.todo(todo2);
Destroying Controls
Control调用destroy 方法会去除绑定的监听事件,同时移除它关联的元素,但是不回去移除页面上的页面元素。Eg:
1. var list = new Todos('#todos');
2. $('#todos').length; // 1
3. list.destroy();
4. $('#todos').length; // 1
可是,当Control对应的页面元素被删除掉时,Control会去调用destroy 。
当一个应用在Body元素上添加Control和监听事件,我们可以通过调用$(document.body).empty().,清除该Control的所有数据