目前为止，我们已经在应用里面，创建了表示数据的模型，表示数据列表的集合，组织模型显示的视图与模板。下面， 我们要想办法，去把模型的列表显示在应用的界面上。这样我们就可以再去为应用创建一个主要的视图，用它来控制应用的主要的显示。
应用视图
这个应用的主视图可以放在 js/Views/AppView.js 这个文件里面。AppView 就是应用的主视图，在这个视图里面，处理了应用需要的大部分的逻辑。在这里，也需要去监听一些事件，去定义一些方法，比如处理创建新任务的方法，把任务项目添加到页面上显示的方法等等。先在这个文件里面，输入下面这些代码：
var app = app || {};
/**
* 视图 View
*
* 为应用创建的视图 - AppView
*/
app.AppView = Backbone.View.extend({
// 把视图 el 属性设置为在页面上已经存在的一个元素
el: ‘#todoapp‘,
});
在上面，我们做的就是去新创建了一个视图，名字是 app.AppView。在这个视图里面，设置了一个它的 el 属性里的内容，用到了在应用的主页面 index.html 里面的一个元素，#todoapp，这个元素就是用来包装应用主要界面用的那个元素，在这里我们直接指定了一个这个元素上的 id 。这样，在这个视图里面，就可以去控制这个元素包装的所有的东西的显示还有行为。
练习
下面，通过一个小练习来理解一下在这里设置的这个 el 属性。先保存一下文件，然后用 Chrome 浏览器打开应用的主页 index.html，再打开浏览器的控制台（Mac：alt + command + J，Win：alt + ctrl + J）。在控制台上，做下面这些测试：
1. 为应用的视图去创建一个实例。
var appView = new app.AppView
2. 查看一下这个新建的视图的 el 属性。
appView.el
3. 找出视图所包含的某个元素。这个元素需要包含在视图的 el 属性里面。
appView.$(‘#footer‘)
启动应用
打开 js/app.js ，在这个文件里面，输入：
$(function() {
app.appView = new app.AppView;
})
新建一个应用的视图的实例。在这里用到了 jQuery特效 的 ready 方法，就是把一个匿名函数交给 $() ，这样，当页面加载以后，就会去执行函数里的东西，也就是去创建一个应用视图的实例。
监听 DOM 事件：按下回车创建新任务
用户应用上面的用来创建新任务的文本框里输入任务的内容，按一下回车键，应用会根据用户在文本框里输入的内容，创建一个新的模型数据，把它存储起来，并且显示到应用的界面上。实现这个功能需要：
- 监听按下按键的事件，判断是否按的是回车键。
- 如果按是回车键，就去得到用户在文本框里输入的内容。
- 根据这些内容在应用的集合里创建并添加新的模型。
- 用模型的视图组织模型的显示并把它显示到应用的界面上。
DOM 事件，你可以把它想像成是发生在 html 页面上的事情。用户在页面上的行为，可能会触发对应的事件，比如点击了某个地方，会触发点击事件（click），双击了某个地方，会触发双击事件（dblclick），鼠标悬停在某个地方，会在这个地方触发悬停事件（hover）。你可以通过代码，在应用里面监听这些事件，当发生指定的事件以后，用设计好的函数去处理这个事件。
下面，我们需要在应用的视图上，去监听一下按下按键的事件（keypress），发生这件事情以后，去执行一下指定的动作。在视图里面，去监听 DOM 事件，可以在视图里去添加一个 events 属性：
events: {
// 监听创建任务的文本框的按下按键的事件
‘keypress #new-todo‘ : ‘createOnEnter‘,
},
在上面，监听了一个 keypress 事件，并且指定了一下发生这个事件的元素，#new-todo 就是用来创建新任务用的那个文本框元素。在文本框上发生 keypress 事件以后，去执行 createOnEnter 这个方法。在应用的视图里面，再去定义一下这个方法：
// 在文本框里发生 keypress 事件的时候要做的事
createOnEnter: function(event) {
// 判断按的按键是否是 Enter(回车)键
// 或者
// 在文本框里输入的东西在清理之后是空白的
if (event.which !== 13 || this.$(‘#new-todo‘).val().trim() === ‘‘) {
// 条件为真时，return（返回）
// 不再继续执行这个函数
return;
}
// 如果用户按的是回车键
// 并且清理之后文本框里的内容不为空
// 使用集合的 create 方法，根据用户输入的东西创建并存储模型
app.todoList.create({
title : this.$(‘#new-todo‘).val().trim(),
completed : false
});
// 创建并存储模型之后，把文本框里的内容设置成空白的
this.$(‘#new-todo‘).val(‘‘);
},
在这个 createOnEnter 的方法里，可以接收到一个事件对象的参数，这里我们用 event 来表示它，然后在方法的一开始，先判断了一下用户按的是不是回车键，如果不是回车键或者如果用户在文本框里没有输入东西，要做的事就是 return，也就是跳出执行这个函数。
event.which 这里面的东西就是用户按下的具体的按键的代号，回车键是用数字 13 来表示的。如果用户按的是回车键，并且在清理之后的文本框里面有东西，就去执行这几行代码：
app.todoList.create({
title : this.$(‘#new-todo‘).val().trim(),
completed : false
});
app.todoList 表示的是应用里的集合，然后调用集合的 create 方法，根据用户在文本框里输入的内容创建一个模型。模型的 create 方法不仅可以创建新的模型，同时它还可以保存这个模型到数据源里面，并且会把模型添加到集合里面。
this.$(‘#new-todo‘).val(‘‘);
上面这行代码，会清空文本框里的内容。this 指的是当前的这个视图，找到视图里面的 #new-todo 这个元素，调用 jQuery 的 val 方法去设置一下这个元素里的内容，要设置的内容就是一个空白。
练习
- 保存文件，在 Chrome 浏览器里打开 index.html 。
- 在应用界面上的文本框（#new-todo）里面输入点内容，按一下回车键。
- 打开 Resources 选项卡，找到 Local Storage，打开 file:// 。
- 刷新页面，Mac：command + R，Win：ctrl + R。
- 观察打开的在 file:// 下面的 Local Storage 里的东西。
现在， 你在文本框里输入内容，按下回车，就把根据文本框里的内容创建一个任务模型，并且会把它保存到指定的数据源里面，因为我们的应用使用的是 Local Storage 来存储模型的数据，所以，你可以在浏览器的 Local Storage 里面，找到创建的任务模型。
监听发生在集合上的事件：把模型添加到界面上显示出来
把模型添加到集合里面，会在集合中发生一个叫 add 的事件，我们可以去监听这个事件，当发生 add 事件以后，把添加到集合里的模型显示到应用的界面上。
可以在应用的视图里面，去监听集合的事件，把代码放到视图的初始化的方法里面：
// 初始化
initialize: function() {
// 监听集合的 add 事件
this.listenTo(app.todoList, ‘add‘, this.addOne);
// 从数据源里面提取出模型并放到集合里面
app.todoList.fetch();
},
监听集合的事件用的是视图的 listenTo 这个方法。this.listenTo，表示使用当前视图的 listenTo 这个方法。在这个方法里面，需要指定几样东西，第一个东西就是发生事件的对象，这里用了一个 app.todoList ，它表示的就是应用的集合，然后是事件的类型，这里就是 add ，最后是处理这个事件要用到的方法，this.addOne，表示使用这个视图里面的 addOne 这个方法去处理发生在 app.todoList 上面的 add 事件。
app.todoList.fetch();
上面这行代码的意思是，使用集合的 fetch 方法，从数据源里面把模型提取出来，再把它们放到集合里。这样也会在集合上触发 add 事件，也就会去执行 addOne 这个方法。
在这个视图里，再去定义一下 addOne 这个方法：
// 当在集合里发生 add 事件时需要执行的函数
addOne: function(todo) {
// 根据添加到集合里的模型创建一个视图
var todoView = new app.TodoView({model: todo});
// 把渲染之后的模型视图追加到页面上显示出来
$(‘#todo-list‘).append(todoView.render().el);
},
在处理 add 事件的方法里，可以去处理这个被添加到集合里的模型，在这里，我们用 todo 来表示添加到集合里的模型。然后在 addOne 这个方法里面，先去根据这个模型去创建一个模型的视图。
$(‘#todo-list‘).append(todoView.render().el);
上面这行代码的意思是，找到应用视图里面的 #todo-list 这个元素，也就是用来表示任务列表的那个元素，再使用 jQuery 的 append 方法去往这个元素里面添加点东西，要添加的东西就是渲染之后的模型视图的 el 这个属性里的东西。
练习
保存文件以后，到浏览器上再去试式，打开应用的主页 index.html ，然后刷新一下页面。会发生下面这些事：
- 应用先会去创建应用视图的一个实例。
- 创建了视图实例后会执行它的初始化方法。
- 这样去监听发生在集合里的 add 事件。
- 然后执行集合的 fetch 方法提取出模型并添加到集合里面。
- 把模型添加到集合里会发生 add 事件。
- 这就会执行处理 add 事件用到的 addOne 方法。
- 在这个方法里，根据模型创建模型视图。
- 然后把渲染之后的模型视图的 el 属性里的值追回到页面上用来表示任务列表的元素里面。
在创建新任务的文本框里面输入点东西，然后按一下回车键，会发生：
- 执行处理 keypress 事件的方法 createOnEnter。
- 在这个方法里，判断按的是否是回车键，并且在文本框里面有东西。
- 根据文本框里的内容创建并保存模型，同时也会把模型添加到集合里面。
- 这时会在集合上触发 add 事件，也就会执行 addOne 方法。
- 在这个方法里，根据模型创建模型视图。
- 然后把渲染之后的模型视图的 el 属性里的值追回到页面上用来表示任务列表的元素里面。
JavaScript 应用开发 #3：应用的主视图由源码搜藏网整理,转载请注明出处http://www.codesocang.com/jiaocheng/js/9785.html
JavaScript 应用开发 #3：应用的主视图