View视图故名思义，它控制的是界面。我们可以把一个大的网页分成很多部分的视图，按照backbone的架构，每一个视图对应都是一个对象，我们可以通过元素的钩子（id或者class或者其他选择器）把它们封装到View对象中集中操作。由于传统项目中界面视图和数据不分层，使得各种操作数据逻辑和视图逻辑的代码混杂在一起，提高了代码的耦合度。backbone就是将这种情况作了很好的处理。下面我们通过一个简单的例子一步步地讲明白它的具体设计思路：
首先我们编写基础的html：
<div id="m" style="height:200px; width:200px; background:red;"> <div class="c" style="height:100px; width:100px; background:green;"></div> </div>
两个div，父元素的id为m，子元素的class为c。我们要做的是利用bk框架，将model里面一段数据（‘hello’）放到子元素的innerHTML里面，通过点击事件弹出它的内容。下面我们看下js代码：
//M扩展了一个模型，给定一个初始值
var M = Backbone.Model.extend({
defaults : {
text : 'hello world'
}
});
//实例化一个模型
var m = new M();
//继承并且扩展一个View
var V = Backbone.View.extend({
//初始化函数
initialize : function() {
this.render();
},
//渲染模版，在这里我们为了简化使用的事直接给html赋值的方法
render : function() {
var t = this.model.toJSON().text;
$(this.el).find('.c').html(t);
},
//添加内部事件
events : {
'click .c' : 'click'
},
//内部时间具体的实现方法
click : function(e) {
var text = $(e.target).html();
alert(text);
}
});
//创建View的实例，并且给定基础值。
var v = new V({model : m, el : '#m'})
在上面我们新建了一个模型，给它赋默认的一个值，我们还建立了一个视图，并且指向了节面的元素。通过对html源码的查询，我们可以看到，子元素已经填充了model中的hello world 数据：
并且绑定了click事件：
那么它是怎么样实现的呢？首先，我们从实例化V这个对象说起，下面是关于View的构造函数的源码：
e.View = function(a) {
this.cid = f.uniqueId("view");
this._configure(a || {});
this._ensureElement();
this.delegateEvents();
this.initialize.apply(this, arguments)
};
var u = /^(\S+)\s*(.*)$/,
n = ["model", "collection", "el", "id", "attributes", "className", "tagName"];
View的构造函数主要做了几件事情，也就是说在实例化View的时候它1、首先配置默认的值的参数->_configure():
_configure: function(a) {
this.options && (a = f.extend({}, this.options, a));
for (var b = 0, c = n.length; b < c; b++) {
var d = n[b];
a[d] && (this[d] = a[d])
}
this.options = a
},
此方法是对实例化的时候对内部本身的一些值重新赋值。可以看到，里面循环了一个变量n，n指的就是一个包含可以重新定义值的数组，我们可以在之前关于n的定义中找到n所包含的一些值 ["model", "collection", "el", "id", "attributes", "className", "tagName"];如果你在实例化的时候传入的字面量中有n数组中包含的值的健名，那么它就会赋值到view这个对象里面通过this.xxxx或者this.options.xxxx调用到，而其他不在n数组中的属性则不会起任何作用。
第二步确认传入了el，也就是是说确保这个view对象有关联的html元素存在->_ensureElement()：
_ensureElement: function() {
if (this.el) {
if (f.isString(this.el)) this.el = g(this.el).get(0)
} else {
var a = this.attributes || {};
if (this.id) a.id = this.id;
if (this.className) a["class"] = this.className;
this.el = this.make(this.tagName, a)
}
}
我们可以从里面看到，这个方法会判断我们在实例化时是有el这个属性是否存在，如果没有它会根据其他的属性配置自动创建一个元素出来，这里用的是自己的方法make()来制造对象的html元素。这里也许大家或有疑问，那就是我不知道需要创建那种类型的元素。bk默认创建的是div元素，因为它默认的就是这样的，在源码中我们可以看到this.tagName属性被赋予了默认的值，所有make出来的时div，当然前提是如果你没有覆盖它的话。
第三步，也是很关键的一步，绑定内部的事件->delegateEvents():
delegateEvents: function(a) {
if (a || (a = this.events)) for (var b in f.isFunction(a) && (a = a.call(this)), g(this.el).unbind(".delegateEvents" + this.cid), a) {
var c = this[a[b]];
if (!c) throw Error('Event "' + a[b] + '" does not exist');
var d = b.match(u),
e = d[1];
d = d[2];
c = f.bind(c, this);
e += ".delegateEvents" + this.cid;
d === "" ? g(this.el).bind(e, c) : g(this.el).delegate(d, e, c)
}
}
查阅源码，我们可以看到此方法会寻找this.events这个属性，并且枚举它。在项目的代码中我们在extend中已经给了它的events属性配置了值：events:{'click .c' : 'click'}并且自定义了关联的click方法（传入了事件对象e）。因此，delegateEvents会把events中的属性进行枚举，逐个地利用zepto的bind方法将我们自己定义的方法（如click）绑定到html（.c）元素上去。值得说明的是，我们在events中绑定的都是el中的元素，也就是说是利用el作为委托的最高级父元素向下捕获事件的。加入A元素不在el这个元素中，那么这样的绑定时无效的。
最后它执行了初始化函数->initialize();而在扩展的过程当中，我们重写了initialize方法并且在里面调用了自定义render函数，因此在实例化的时候会自动渲染html。
就这样，一个完整的视图对象就出现了。View能够使我们更加专注于界面逻辑，每一个视图对象中紧密地包含着自己的内部界面逻辑。通过model关联到对应的模型对象，同时它也使得我们在编写代码的时候更加美观。
