Canjs基础教程之Controls

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的所有数据