backbone.js学习笔记2—demo分析

以github上backbone.js经典例子进行分析:
1、todo.js

$(function(){
var Todo = Backbone.Model.extend({});//定义Todo模型
var TodoList = Backbone.Collection.extend({});//定义TodoList集合
var Todos = new TodoList;//实例化TodoList集合
var TodoView = Backbone.View.extend({});//定义TodoView视图
var AppView = Backbone.View.extend({});//定义AppView视图
var App = new AppView;//实例化AppView视图
})

实例化TodoList集合,会自动触发TodoList的初始化,初始化函数未进行任何操作。
实例化AppView视图,会自动触发AppView的初始化,初始化函数功能如下:

initialize: function() {
  this.input = this.$("#new-todo");
  this.allCheckbox = this.$("#toggle-all")[0];
  this.listenTo(Todos, 'add', this.addOne);
  this.listenTo(Todos, 'reset', this.addAll);
  this.listenTo(Todos, 'all', this.render);
  this.footer = this.$('footer');
  this.main = $('#main');
  Todos.fetch();
}

可以看到AppView视图在Todos集合实例上注册了监听,监听Todos的add事件。
AppView视图上绑定了事件

events: {
  "keypress #new-todo":  "createOnEnter",
  "click #clear-completed": "clearCompleted",
  "click #toggle-all": "toggleAllComplete"
}

createOnEnter事件如下:

createOnEnter: function(e) {
  if (e.keyCode != 13) return;
  if (!this.input.val()) return;
  Todos.create({title: this.input.val()});
  this.input.val('');
}

createOnEnter触发了Todos的create事件。而create事件触发this.add().所以Todos的add事件被触发,则触发this.addOne事件。在addone事件里新建一个TodoView的实例。
这个流程的触发点是:AppView视图上绑定了事件。那么为什么视图的events属性就能实现绑定事件的操作呢?让我们来钻一下牛角尖。
视图的构造函数里有这么一个操作this._ensureElement():

var View = Backbone.View = function(options) {
    this.cid = _.uniqueId('view');
    _.extend(this, _.pick(options, viewOptions));
    this._ensureElement();
    this.initialize.apply(this, arguments);
  };

我们来看一下this._ensureElement()都做了些什么。它调用this.setElement,而在setElement方法里调用了事件绑定函数:this.delegateEvents();在this.delegateEvents()中对事件进行了delegate。视图对象通过delegate()方法绑定事件,意味着我们不需要关心视图结构变化对事件产生的影响,同时也说明events中选择器所对应的元素必须处于视图的el元素之内,否则绑定的事件是无法生效的。尽管如此,有些情况下可能我们仍然需要手动绑定和解除事件,视图对象提供了delegateEvents()和undelegateEvents()方法用于动态绑定和解除events事件列表,你可以通过查看API文档来了解它们。
下面让我们整理一下这个流程:

整个过程的触发就是在控制器以及视图的实例化时。那么控制器和视图的实例化分别做了什么呢?
a)控制器的实例化

如图,在集合里新建了一个模型对象。此对象与集合有映射关系,模型对象变化会导致集合变化。

b)视图的实例化

在视图里定义初始化函数,实例化时进行视图的初始化,初始化时对控制器实例的特定事件(add、reset、all)进行监听。
对于add事件:回调函数进行实例化视图TodoView、渲染视图操作。
事件的绑定是在视图实例化时进行的。

推荐文章:Backbone入门指南(六):View (视图)

此条目发表在pri, 成长, 面试分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注