回顾

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

现在,我们就完成了这个任务管理应用里面的一个基本的功能。在文本框里输入任务的标题 ... 按一下回车 ... 会存储任务,并且,会把任务显示到界面上 ...

下面可以再一起回顾一下我们都做了什么。

模型

首先,我们定义了一个表示任务项目的一个模型 ... 在 Models 目录的下面,Todo.js 这个文件里面。

这里我们用 Todo 这个词来表示这个任务的模型 .. 在这个模型里面,设置了两个基本的属性 ... title 表示任务的标题,completed 表示任务的完成的状态 ...

集合

接着我们又添加了一个集合,来表示任务的列表 ... 在 Collections 这个目录的下面,TodoCollection.js 这个文件里面 ...

这个集合的名字是 TodoCollection ... 在这里指定了跟这个集合对应的模型是什么 ... 然后设置了一下 Backbone 的 Local Storage 插件 ... 它的作用就是,把数据放到浏览器的 Local Storage 里面去存储 ...

这里,又新建了一个集合的实例 ... 叫 todoList ... 在应用的其它的地方,会用到这个 todoList 这个集合的对象 ...

视图

模型需要一个视图去组织它的显示 .. 在 Views 这个目录里面的 TodoView.js 这个文件里,我们为任务模型定义了一个叫 TodoView 的视图 ... 在这里,指定了视图的标签是 li ,一个列表标签 ...

然后给任务模型创建了一个模板 ... 模板是在 index.html 这个文件里面定义的 ... 就是这个 item-template ...

应用视图

我们又创建了一个应用的主视图,在 Views 这个目录里面的 AppView.js 这个文件里面。 设置了一下它的 el 属性 ... 这里我们用的是一个现成的元素 ... 也就是在 index.html 里面的 id 是 todoapp 的这个元素 ...

在这个视频里面,监听了文本框的 keypress 事件,也就是一个按键事件 ... 发生这个事件的时候,如果用户按的是回车键 ... 并且文本框里有东西的话 ...

就会根据用户输入的东西,去创建了一个任务项目 ... 同时也会把这个任务项目存储到 Local Storage 里面,并且会把这个任务项目添加到任务的集合里。

这样,又会触发 add 事件,我们又监听了这个事件,发生它的时候,去执行 addOne 这个方法 ... 它做的事,就是根据创建的任务模型,去创建一个视图,然后去渲染这个任务视图,也就是会用设计好的模板,组织好任务数据的结构,再把它追加显示在应用的界面上。

在初始化这个应用视图的时候,还会去调用任务集合的 fetch() 方法,从数据源那里提供出任务的模型,并且把它们都添加到集合里面,这样也会触发 add 事件,然后把这些任务项目显示到应用的界面上。

1:52
0:00
6:36
3:22
3:42
0:00
2:29
4:08

回顾《 Backbone 应用实例 》

统计

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

社会化网络

关于

微信订阅号

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