JavaScript 应用开发 #3：应用的主视图

目前为止，我们已经在应用里面，创建了表示数据的模型，表示数据列表的集合，组织模型显示的视图与模板。下面， 我们要想办法，去把模型的列表显示在应用的界面上。这样我们就可以再去为应用创建一个主要的视图，用它来控制应用的主要的显示。

应用视图

这个应用的主视图可以放在 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 事件：按下回车创建新任务

用户应用上面的用来创建新任务的文本框里输入任务的内容，按一下回车键，应用会根据用户在文本框里输入的内容，创建一个新的模型数据，把它存储起来，并且显示到应用的界面上。实现这个功能需要：

1. 监听按下按键的事件，判断是否按的是回车键。
2. 如果按是回车键，就去得到用户在文本框里输入的内容。
3. 根据这些内容在应用的集合里创建并添加新的模型。
4. 用模型的视图组织模型的显示并把它显示到应用的界面上。

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 方法去设置一下这个元素里的内容，要设置的内容就是一个空白。

练习

1. 保存文件，在 Chrome 浏览器里打开 index.html 。
2. 在应用界面上的文本框（#new-todo）里面输入点内容，按一下回车键。
3. 打开 Resources 选项卡，找到 Local Storage，打开 file:// 。
4. 刷新页面，Mac：command + R，Win：ctrl + R。
5. 观察打开的在 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 ，然后刷新一下页面。会发生下面这些事：

1. 应用先会去创建应用视图的一个实例。
2. 创建了视图实例后会执行它的初始化方法。
3. 这样去监听发生在集合里的 add 事件。
4. 然后执行集合的 fetch 方法提取出模型并添加到集合里面。
5. 把模型添加到集合里会发生 add 事件。
6. 这就会执行处理 add 事件用到的 addOne 方法。
7. 在这个方法里，根据模型创建模型视图。
8. 然后把渲染之后的模型视图的 el 属性里的值追回到页面上用来表示任务列表的元素里面。

在创建新任务的文本框里面输入点东西，然后按一下回车键，会发生：

1. 执行处理 keypress 事件的方法 createOnEnter。
2. 在这个方法里，判断按的是否是回车键，并且在文本框里面有东西。
3. 根据文本框里的内容创建并保存模型，同时也会把模型添加到集合里面。
4. 这时会在集合上触发 add 事件，也就会执行 addOne 方法。
5. 在这个方法里，根据模型创建模型视图。
6. 然后把渲染之后的模型视图的 el 属性里的值追回到页面上用来表示任务列表的元素里面。

JavaScript 应用开发 #3：应用的主视图,古老的榕树,5-wow.com