在 Backbone 里面的视图，一般不会包含在应用程序上用到的 HTML 标签。它其实是把模型里面的数据展示给用户的一套逻辑。在视图里，经常会使用 JavaScript 的模板去组织在模型里面的数据。比如我们可以 Underscore 的 模板功能，或者 Mustache 等等。

视图里面的 render() 方法，可以跟模型的 change 事件绑定到一块，这样模型一旦发生了变化，视图就会立即做出响应，而且不需要重新刷新整个页面。

创建

下面，我们可以先去创建一个视图。var NoteView ，要创建的视图的名字叫做 NoteView ... 让它等于 Backbone的 View 的 extend() 方法 ...

这样我们就创建好了一个视图，叫做 NoteView ...

el

在视图里面有一个很重要的属性，叫做 el ，每个视图都得有这个属性 ... 它实际上就是一个 DOM 元素， 视图要用它来组织内容，然后一块儿插入到 DOM 里面。默认这个 el 属性的值，是一个 div 标签 ...

下面，我们可以去看一下 ...

保存 ... 回到浏览器 ... 打开控制台 ...

先新建一个视图的实例 ...

var noteView = new NoteView

然后查看一下它的 el 属性 ...

noteView.el

返回的结果是一组 div 标签 ...

在定义视图的时候，我们可以去修改这个元素的名字 ... 回到编辑器 ...

比如我们要用一个 li 元素 ... 在这个视图里面，设置一下 tagName 属性 ... 它的值就是 el 属性要用到的元素的名字 ...

tagName: 'li'

如果想在这个元素上面添加一些属性，可以再设置一下 attributes 属性，或者如果只想设置在这个元素上的 class 属性或者 id 属性，可以直接使用 className ，还有 id ...

className: 'item'

这样每个 li 元素上面，都会有一个 class 属性，属性的值就是 item ... 如果要设置 id 的属性的话，可以在下面再去定义一个 id 这个属性，还有对应的值 ...

或者还想添加一些其它的属性，可以设置一下 attributes 属性 ... 这个属性的值是一个对象 ... 在这里面，添加一个叫做 data-role 的属性 ... 属性的值，可以设置成 list ... 注意这个 data-role 这个名字中间有个小横线，所以，它的周围需要用一组引号 ...

attributes: {
'date-role': 'list'
}

保存 ... 回到浏览器 ...

新建一个视图的实例 ... 然后再去查看一下 el 属性 ...

var noteView = new NoteView
noteView.el

你会发现，这个 el 属性的值就是我们刚才设置的那个 ... 元素的名字是 li ，并且在上面，会有一个 data-role 的属性，值是 list ，还有一个 class 属性，值是 item ...