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 事件:按下回车创建新任务
用户应用上面的用来创建新任务的文本框里输入任务的内容,按一下回车键,应用会根据用户在文本框里输入的内容,创建一个新的模型数据,把它存储起来,并且显示到应用的界面上。实现这个功能需要:
- 监听按下按键的事件,判断是否按的是回车键。
- 如果按是回车键,就去得到用户在文本框里输入的内容。
- 根据这些内容在应用的集合里创建并添加新的模型。
- 用模型的视图组织模型的显示并把它显示到应用的界面上。
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