🦄 2024 独立开发者训练营,一起创业!查看介绍 / 立即报名 →

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')

QQ20140617-6

启动应用

打开 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 里面,找到创建的任务模型。

QQ20140617-4

监听发生在集合上的事件:把模型添加到界面上显示出来

把模型添加到集合里面,会在集合中发生一个叫 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 属性里的值追回到页面上用来表示任务列表的元素里面。

QQ20140617-5

JavaScript Backbone

评论

王浩老师您好,我是您的付费用户,最近在学您的php,但是还未完结,可是我的账户到6.19就截止了555555555···想学完php,这可怎么办啊。

王皓老师,抱歉打错字了。

嘿嘿。再续一年吧,现在会多送一年的时间。也就是 599 可以订两年。

两年!~那可以考虑一下哈~

王老师,我现在想续订,还是可以599两年么

已订阅,免回

感谢再次支持 :)

今天开始系统学习一下 王浩同学的移动开发。 顶一个!

微信好友

用微信扫描二维码,
加我好友。

微信公众号

用微信扫描二维码,
订阅宁皓网公众号。

240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点