Backbone基础（二）：视图（View）

Backbone中的View用来反应的APP中的Model的样子。它们会见厅事件并做出相应的动作。或者说它们包含着模型里的展示逻辑，用于展示给用户。视图使用 JavaScript模版完成这一功能（如Underscore微模版、Mustache、jQuerytmpl等）。视图的render()方法可以绑定在模型的change()事件上，不需要重新刷新整个页面，就可以使视图即时反应模型的变化。

创建视图

创建新视图很简单，和创建模型类似。简单的扩展一下Model.View就可以创建一个新视图。下面是一个创建视图的小示例：

var MyView = Backbone.View.extend({
  tagName: 'li',
  
  myTpl :_.template("一个示例模版"),

  events: {
    'click label' : 'edit',
    'keypress .edit' : 'updateOnEnter',
    'blur .edit' : 'close'
  },

  render : function(){
    this.$el.html( this.myTpl(this.model.toJSON()));
    this.input = this.$('.edit');
    return this;
  },

  edit: function(){
    //...
  },

  close: function(){
    //...
  },

  updateOnEnter: function(){
    //...
  }
});

var myView = new MyView();
console.log(myView.el); //<li></li>

el属性

el是View的一个核心属性，所有视图都拥有一个DOM元素（el属性），即使该元素仍未插入页面中去。视图可以在任何时候渲染，然后将所有的内容一次性插入到DOM里，是页面渲染更快，因为浏览器执行了最小次数的重排和重绘。

有两种方式可以将DOM元素与视图相关联：为视图创建一个新的元素，随后将它添加到DOM里；用页面已经存在的元素给视图做一个引用。

如果想对一个视图创建一个新的元素，可以在视图上对下面的属性做任意组合的设置：tagName、id和className。tagName如果不指定的话，默认为div。

前面的示例中由于tagName设置了li，所以结果是创建了一个li元素；下面这个示例将创建一个带有id属性和class属性的ul元素。

var MyView = Backbone.View.extend({
  tagName : 'ul',//指定元素（标签）名字
  className : 'container',//指定样式名字
  id : 'myview'//给标签设定一个id
});

var myView = new MyView();
console.log(myView.el); //<ul id="myview" class="container"\></ul>

上述代码创建了一个DOM元素，但他并没有福佳到视图的DOM元素上。

如果元素在页面上已经存在了，可以为ｅｌ设置一个CSS选择器来匹配元素。

el: '#footer'

或者在创建视图的时候，将el设置在现有的元素上：

var myView = new MyView({el:$("#footer")});

1.\(el和\)()

视图中的逻辑经常需要在el元素和其嵌套的元素上调用jQuery或Zepto的函数。通过定义\(el属性和\)()函数，Backbone将使这一切变得简单。视图的.\(el属性等价于\)(view.el)，.\((selector)等价于\)(view.el).find(selector)。在文章开头的例子中的render方法中，我们看到了this.\(el用于设置元素的HTML，而this.\)()在用于查找class为edit的子元素。

2.setElement

如果想将现有的Backbone视图应用于另外一个不通的DOM元素，可以使用setElement。重写this.el需要同时更改DOM引用和在新元素上重新绑定事件。

setElement将创建一个缓存$el引用，并且将事件从旧元素委托给新元素。

var btn1= $('<button></button>');
var btn2= $('<button></button>');

var MyView = Backbone.View.extend({
  events: {
    click: function(e){
      console.log(myView.el === e.target)
    }
  }
});

//创建一个视图实例，并应用到btn1上
var myView = new MyView({el:btn1});

//用setElement方式将视图运用到btn2上
myView.setElement(btn2);
btn1.trigger('click');
btn2.trigger('click');//true

el属性表示的是视图即将渲染展示的页码标记。为了让视图能在页面上渲染，需要将视图作为新元素添加到页面上，或者将视图附加到一个页面现有的元素上。

var view = new Backbone.View;
view.setElement('<p><a><b>test</b></a></p>');
view.$('a b').html(); //outputs "test"

3.render()

render 默认实现是没有操作的。 重载本函数可以实现从模型数据渲染视图模板，并可用新的 HTML 更新 this.el。 推荐的做法是在 render 函数的末尾 return this 以开启链式调用。这种模式允许我们将该视图作为子视图进行重用，也可以使用它在渲染之前进行与渲染。

4.Events

Backbone的events允许我们为el相关的自定义选择器或者直接为el本身添加事件监听器。事件采用的是'eventName selector' : 'callbackFunction'这样的key-value对的形式，并且支持大量的DOM事件类型，包括click、submit、mouseover、dblclick等。

var MyView = Backbone.View.extend({
  tagName : 'li',

  events : {
    'click .toggle' : 'toggleCompleted',
    'dbclick label' : 'edit',
    'click .destory' : 'clear',
    'blur .edit' : 'close'
  },
  //....
});