欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

backbone 基础 宁皓 有大用 有大大用

 1)
介绍
Backbone 是一套非常优秀的类库,可以用在开发前端应用程序上面。它为应用程序提供了一个骨架,也就是它提供了一个很好的结构,可以让我们的应用程度更容易维护和管理。

这个课程我们会去介绍 Backbone 里的几个很重要的概念 ,怎么样去创建模型,设置模型的属性,监听模型相关的事件。怎么样把模型添加到集合里面。去为模型创建视图,再把渲染之后的模型放到集合的视图里面。

再了解下什么是路由器。

最后我们会用 Backbone 跟服务端的应用相互沟通,去从服务端那里提取数据,创建,更新,还有删除数据。

来自 http://ninghao.net/video/1445#info

 

2) 准备
在这个课程的资料里,你可以找到一个 starter 目录 ... 你可以使用这个目录里的东西,跟课程一步一步去学习 Backbone ...

这个目录的根目录下面,有一个 index.html ... 这就是应用的首页 ...

在这个文档里面,已经嵌入了 Backbone 应用需要用到的一些东西 .. Backbone 唯一依赖的,是这个 underscore ... 其它的东西都是可选的 ..

app.js 这里可以存入应用程序需要的一些代码 ... 为了演示方法,我们会把所有需要的代码都放到这一个文件里面 ... 在创建真正的应用程序的时候,你可以需要想办法按照功能,把代码分割成几个部分 ...

我在演示的时候,也没有在代码里面,使用命名空间的概念 ... 所有的变量都是在全局环境下面定义的 .. 你在创建真正应用的时候,最好把代码封闭到一两个对象里面。尽量减少在全局环境下面的变量 ...

另外,在这个课程里,我经常会用到浏览器的控制台,你可以使用 Chrome 浏览器 ..

来自  http://ninghao.net/video/1446#info


模型
3)模型 - Model
创建一个模型,也就是创建一个 model ,可以使用 Backbone Model 的 extend 方法。比如我们要做一个记笔记的应用,可能会有的模型就是笔记这个模型,可以使用英文 note 来表示笔记 ...

var Note ,一般这个名字的首字母都是使用大写的,等于 ... Backbone.Model.extend({});

var Note = Backbone.Model.extend({});

这个 Note 就有点像是一个 class ,也就是一个类 ... 它里面已经有了一些定义好的属性还有方法 ... 因为它继承了 Backbone 的 Model ...

在这个 extend 方法里面,我们可以去添加一些属性和方法 ... 这些属性和方法就是基于 Note 这个类创建的对象所拥有的属性和方法 ...

我们可以先去看一下 .. 打开浏览器 ... 用浏览器打开应用的首页 ... 这里我用的是 Chrome ... 再打开它的开发者工具 ... alt + command + J

在这里,我们先去试试,创建一个 note 对象 ... var note1 ... 这个对象的名字叫 note1 ... 等于 new Note() ... 它就是刚才我们创建的那个类 ...

var note1 = new Note;

这个动作就是去实例化一下这个 Note 类 ... 这里的 note1 就是 Note 类的一个实例,或者叫 Note 类的一个对象 ...

再输入 note1 .. 回车 ..

这里会显示目前 note1 这个对象拥有的一些属性还有方法 ... _changing ... 现在它的值是 false .. _pending ... 它的值也是 false ...

这里还有一个 attributes 属性 ... 目前它里面啥也没有 ...

我们给对象添加的属性,都会包含在这个 attributes 属性里面 ... 下面,可以再去试一下给对象添加一些属性 ...

再去创建一个 Note 对象 .... var note2 等于 new Note ... 这里我们在实例化 Note 类的时候,可以给它一些属性 ...

输入一组括号 .. 里面是一个对象 ... 用一组花括号 ... 然后再去定义属性还有对象的值 ... 在笔记里面,可能有的属性,比如标题,内容,作者,创建和修改的日期等等 ... 先添加一个标题属性 ... 可以叫做 title ... 冒号 ... 然后是这个属性对应的值 ... 西红柿炒鸡蛋的做法 ... 再输入一个逗号分隔一下 ... 继续去添加其它的属性 ... created_at ... 用它来表示笔记的创建的日期 ... 它的值可以实例化一下 JavaScript 的 Date 对象 ... 默认它会返回当前的日期和时间 ...

var note2 = new Note({title: '西红柿炒鸡蛋的做法', created_at: new Date()})

再看一下这个 note2 对象 ... 打开它 ... 再打开它的 attributes 属性 ..

你会看到这里会有两个属性 ... created_at ... 表示笔记的创建的日期 ... 另外还有一个 title 属性,它的值就是我们在创建这个对象的时候设置的,西红柿炒鸡蛋的做法。

来自  http://ninghao.net/video/1447#info
 

4) 获取,添加,删除,清空属性

 

想得到对象里面的属性,可以访问对象的 attributes 属性 ...

note2.attributes

得到的是一个对象,里面就是这个 note2 对象的属性 ... 或者,我们也可以使用 toJSON() 这个方法 ...

note2.toJSON()

返回的结果也是一个对象 ...

要把这个对象的属性转换成 JSON 的形式... 可以把这个对象交给 JSON.stringify 去处理一下 ...

JSON.stringify(note2)

判断这个对象是否有指定的属性,可以使用 has 方法 ... 我们看一下 note2 这个对象有没有 title 这个属性 ...

note2.has('title')

返回的结果是 true ,表示有这个属性 ... get 这个方法可以得到某个属性的值。比如要得到 title 这个属性的值,可以这样 ..

note2.get('title')

结果就是 西红柿炒鸡蛋的作法 ...

删除某个属性,用的是 unset 方法 ... 要删掉 title 这个属性,可以这样做 ..

note2.unset('title')

再去判断一下有没有 title 这个属性 ...

note2.has('title')

结果是 false .... 因为前面,我们用了 unset 方法,把 title 这个属性从 note2 这个对象里面删除掉了 ...

再给这个对象去添加属性,可以使用 set 方法 ... 比如再去添加一个 title 属性 ..

(#command + K,清空屏幕)
note2.set('title', '西红柿炒鸡蛋的做法')

再去访问一下这个属性 ...

note2.get('title')

会得到它的值 ...

设置多个属性,可以给 set 方法传递一下对象 ... 比如再去添加一个 author 作者属性,还有一个 location ,表示笔记记录位置的属性 ...

note2.set({author: '王皓', location: '济南'})

再查看一下 note2 的所有的属性 ...

note2.attributes

在这里,你会看到之前添加的 title ,还有 created_at 属性,还有刚才用 set 添加的 author 和 location 这两个属性 ...

清空对象的属性,用的是 clear 方法

note2.clear()

再查看一下对象的属性 ...

note2.attributes

这次会返回一个空白的对象 ... 因为 note2 的所有的属性,已经用 clear 这个方法清空了 ...

来自  http://ninghao.net/video/1448#info

5) 默认值 - defaults
在定义模型的时候,我们可以去设置一下模型的 defaults 属性,去给模型添加一些默认的属性,还有对应的这些属性默认的值 ... 这样在创建模型的实例以后,这个实例就会拥有这些默认的属性了。下面,我们一起去看一下 ...

在这个 Note 模型里面 ... 添加一个 defaults 属性 ... 它的值是一个对象 ...

defaults: {}

在这里面,可以添加一个笔记的标题属性 .. title ... 它的值默认是个空白的字符串 ...

再添加一个表示笔记创建的时间的属性 ... created_at ... 这个属性默认的值可以是当前的时间 ...

defaults{
title: '',
created_at: new Date()
}

保存 ... 回到浏览器 ... 打开应用的首页 ... 刷新一下 ... 然后在控制台上,我们可以去创建一个 Note 对象的实例 ...

var note = new Note

再查看一下 note 这个对象 ...

打开它的 attributes 属性 ... 虽然在创建这个 note 对象的时候,我们并没有去给它指定属性 ... 不过在 Note 这个模型里面,添加了一些默认的属性 ... 所以,创建的对象,就会拥有这些默认的属性...

这里你会看到 title ,还有 created_at 这两个默认的属性 ... 这些属性的值,可以在创建这个对象的时候覆盖掉 ...

来自  http://ninghao.net/video/1449#info

6) 初始化 - initialize
 

基于这个模型创建了一个实例以后,会去调用模型里面的 initialize 这个方法 ... 在这个方法里,你可以去做一些事情 ... 比如去监听属性的变化事件什么的 ...

回到编辑器 ... 在这个 Note 模型里面 ... 再去定义这个 initialize 方法 ... 这里我们先只是简单的在控制器上输出一点文字 ...

initialize: function() {
console.log('新创建了一条笔记 :' + this.get('title'));
}

这里的 this 这个关键词,表示的就是被创建的这个对象,或者说被实例化的这个对象 ... this.get('title'),可以输出被创建的对象的标题属性的值 ...

保存 ... 回到浏览器 ... 先刷新一下 ..

然后,在控制台上,去创建一个 Note 类的实例 ...

var note = new Note({title: '西红柿炒鸡蛋的做法'})

在创建了这个对象以后,就会去调用 initialize 方法 ... 在这个方法里,我们暂时只是让它在控制器上输出一点文字 ... 这里就是 新创建了一条笔记 :西红柿炒鸡蛋的做法。

来自 http://ninghao.net/video/1450#info

7) 属性值变化发生的事件 - change

当我们使用 set 方法,去给对象设置属性的时候,如果新设置的属性的值照原来的值发生了改变,就会在这个模型上面触发一个 change 事件... 同时也会在这个特定的发生变化的属性上面触发一个 change 事件 ... 这个事件的名字可以使用 change 后面加上冒号,再加上这个属性的名字来表示。比如,如果 title 的值发生了变化,就会触发一个 change 事件,还会触发一个 change:title 的事件。

下面,我们可以利用这个变化的事件去做点事 ...

在这个模型的初始化方法里面,可以使用 on ,去监听这个 change 事件 ... 用 this 关键词,可以表示当前的这个模型的对象 ... on 方法的第一个参数是要监听的事件的名字 ... 这里就是 change ... 第二个参数是处理这个事件要执行的函数 ..

这里我们用一个匿名函数 ... 它可以授受两个参数 ... 模型对象,还有选项 ... 用 model 表示当前的对象 ... 用 options 表示选项 ...

发生 change 事件,要做的事就是在控制台上,输出一点文字 ...

// 处理属性值改变以后发生的 change 事件
this.on('change', function(model, options) {
console.log('属性的值发生了变化');
});

下面,我们可以再去监听一下改变标题属性的值的时候发生的改变事件 ..

这里要监听的事件是 change:title ... 事件发生以后,同样在控制台上输出点东西 ...

this.on('change:title', function(model, options) {
console.log('标题属性的值发生了变化');
});

保存 ... 下面到浏览器上去试试 ... 新建一个模型对象 .. 再去设置一下它的 title 属性的值 ..

var note = new Note
note.set('title', 'Hello')

回车 ... 在控制台上,会显示 ...

标题属性的值发生了变化 还有 属性的值发生了变化 这两条信息 ... 模型里的属性的值发生了变化 ... 会触发 change 事件 ... 同时,也会触发 change:title 事件,因为 title 这个属性的值也发生了变化 ...

再打开这个对象看一下 ...

这里有一个 changed 属性 ... 打开看一下 ... 这个属性里面的东西就是发生变化的属性,还有对应的值 ...

再设置一下同样的值 ....

因为要设置的 title 属性的值跟当前对象里面的 title 属性的值没有变化 ... 也就不会去触发 change 事件。

来自  http://ninghao.net/video/1451#info

8)验证属性的值 - validate

在用 set,或者 save 方法,去设置属性的值,还有把模型保存到数据库之前,都可以先去验证一下属性的值,验证通过以后,才能去执行这些动作,不然的话,就会返回一个 false ,还有一条事先设置好的错误信息。

这个验证的功能,是通过模型的 validate 方法来做的。

下面,我们去给 Note 这个模型里的 title 属性,去添加一个验证 .. 要求设置的标题属性字符数必须要大于 3。

在 Note 模型里面,去添加一个 validate 这个方法 ... 这接受两个参数 ... 一个是对象的属性,还有一个是选项参数 ... 属性可以用 attributes 来表示 ... 选项可以使用 options ...

然后在这个方法里,用 if 语句,去判断一下 ... 判断的条件是对象的 title 属性这个字符串的长度不能小于 3 ...

attributes.title 可以得到 title 这个属性 ... 后面再加上一个点 length ,可以得到这个字符串的长度 ... 小于 3 。意思就是,如果对象的标题属性的字符串长度小于3,这会验证失败 ...

validate: function(attributes, options) {
if (attributes.title.length < 3) {
return '笔记的标题字符数要大于 3';
}
}

下面,我们去试一下 ... 打开浏览器 ... 先新建一个 note 对象 ... 然后再用 set 方法,去设置一下 note 对象的 title 属性 ... 把属性的值设置一个长度小于 3 的值 ... hi ... 然后再给这个方法传递一个选项参数 ... 在这里,把 validate 这个属性设置成 true ... 表示要使用验证的功能 ...

var note = new Note
note.set('title', 'hi', {validate:true})

回车 ... 在控制台上,会返回一个 false .. 表示验证没有通过,因为给 title 属性设置的值的长度小于 3 ...

再去查看一下这个 note 对象 ... 打开它的 attributes 属性 ... 这里它的 title 属性的值仍然是默认的值 ...

注意在这个对象里面,validationError 这个属性里面,会包含验证失败以后的这条错误的信息。

下面,我们可以重新再去给 title 设置一下值 ... 设置成 hello ...

这回验证就会通过了 ... 因为 hello 的长度大于 3 ... 打开这个返回来的对象 ... attributes .. 在这里, title 的值,已经设置成了 hello ...

来自  http://ninghao.net/video/1452#info

9)利用验证失败后的事件 - invalid
 

在验证失败以后,会触发一个 invalid 事件,我们可以去监听这个事件,在它发生以后,去做一些事情,比如显示一条错误的提醒信息。

在 validate 属性里面设置的验证条件,用 return ,返回来的东西,就是验证失败以后返回来的错误信息。下面,我们可以把这里设置的这条错误信息显示到控制台上看一下。

在模型被初始化以后,可以去监听一下这个 invalid 事件 ... 在 initialize 这里,使用 on 这个方法去监听事件 ... this 表示的就是被实例化的对象 ... 在 on 这个方法里,先指定一下要监听的事件的名字 ... 这里就是 invalid 事件 ...

这个事件发生以后,会去执行一个函数,可以在这个方法的第二个参数里,去指定一下处理这个事件的函数 ... 这里我们用一个匿名函数 ...

函数可以授受两个参数,model 对象,还有 error 错误信息 ...

在里面,用一个 console.log,把这个 error ,错误信息显示到控制台上 ...

//处理验证失败以后发生的 invalid 事件

this.on('invalid', function(model, error) {
console.log(error);
});

保存 ... 回到浏览器上去试一下 ...

先新建一个对象 ... var note = new Note

设置一下它的 title 属性 ... 设置成 hi ... 然后指定一下要使用验证 ...

note.set('title', 'hi', {validate: true})

回车 ... 验证失败,因为要给 title 属性设置的值的长度小于 3 ,所以就会发生一个 invalid 事件,在创建这个 note 对象的时候,我们已经监听了这个事件 ... 这个事件发生以后,就在控制台上,显示验证失败返回来的错误信息。

这里就是 笔记的标题字符数要大于 3 ...

来自 http://ninghao.net/video/1453#info

视图
10)视图 - View

在 Backbone 里面的视图,一般不会包含在应用程序上用到的 HTML 标签。它其实是把模型里面的数据展示给用户的一套逻辑。在视图里,经常会使用 JavaScript 的模板去组织在模型里面的数据。比如我们可以 Underscore 的 模板功能,或者 Mustache 等等。

视图里面的 render() 方法,可以跟模型的 change 事件绑定到一块,这样模型一旦发生了变化,视图就会立即做出响应,而且不需要重新刷新整个页面。

创建

下面,我们可以先去创建一个视图。var NoteView ,要创建的视图的名字叫做 NoteView ... 让它等于 Backbone的 View 的 extend() 方法 ...

这样我们就创建好了一个视图,叫做 NoteView ...

el

在视图里面有一个很重要的属性,叫做 el ,每个视图都得有这个属性 ... 它实际上就是一个 DOM 元素, 视图要用它来组织内容,然后一块儿插入到 DOM 里面。默认这个 el 属性的值,是一个 div 标签 ...

下面,我们可以去看一下 ...

保存 ... 回到浏览器 ... 打开控制台 ...

先新建一个视图的实例 ...

var noteView = new NoteView

然后查看一下它的 el 属性 ...

noteView.el

返回的结果是一组 div 标签 ...

在定义视图的时候,我们可以去修改这个元素的名字 ... 回到编辑器 ...

比如我们要用一个 li 元素 ... 在这个视图里面,设置一下 tagName 属性 ... 它的值就是 el 属性要用到的元素的名字 ...

tagName: 'li'

如果想在这个元素上面添加一些属性,可以再设置一下 attributes 属性,或者如果只想设置在这个元素上的 class 属性或者 id 属性,可以直接使用 className ,还有 id ...

className: 'item'

这样每个 li 元素上面,都会有一个 class 属性,属性的值就是 item ... 如果要设置 id 的属性的话,可以在下面再去定义一个 id 这个属性,还有对应的值 ...

或者还想添加一些其它的属性,可以设置一下 attributes 属性 ... 这个属性的值是一个对象 ... 在这里面,添加一个叫做 data-role 的属性 ... 属性的值,可以设置成 list ... 注意这个 data-role 这个名字中间有个小横线,所以,它的周围需要用一组引号 ...

attributes: {
'date-role': 'list'
}

保存 ... 回到浏览器 ...

新建一个视图的实例 ... 然后再去查看一下 el 属性 ...

var noteView = new NoteView
noteView.el

你会发现,这个 el 属性的值就是我们刚才设置的那个 ... 元素的名字是 li ,并且在上面,会有一个 data-role 的属性,值是 list ,还有一个 class 属性,值是 item ...

来自  http://ninghao.net/video/1454#info
 

11) 渲染视图 - render

视图里面都有一个 render 方法,我们可以使用这个方法去组织一下在模型里面的内容。

先去新建一个模型 ... var note = new Note ... 设置一下它的标题属性 ...

var note = new Note({
title: '西红柿炒鸡蛋的作法'
});

然后再去创建一个 NoteView 这个视图的实例 ... var noteView 等于 new NoteView ... 在创建的时候,可以告诉一下这个视图要用到的模型是哪个 ... 设置一下 model 属性 ... 它的值,就是在上面我们创建的这个 note 对象 ...

var noteView = new NoteView({model: note});

在这个视图里面,我们可以访问到模型里面的属性,比如标题属性,创建日期的属性等等 ...

想利用这些属性,需要在视图里面,再去定义一个 render 方法 ...

render: function() {
this.$el.html(this.model.get('title'));
}

在这个方法里面,可以设置一下在 el 属性里面设置的那个元素里面包含的内容 ... 现在这个元素的标签是 li ... 上面有一个 item 的类,还有一个 data-role 的属性。

在这个 li 元素里面的内容,就是来自 note 模型里面的属性的值 ...

先用一个 this ... 表示当前这个视图 ... 调用它的 $el ,这个 $el 会返回一个用 el 元素的 jQuery 的对象,这样我们就可以继续去使用 jQuery 的其它的方法,去处理这个 el 元素。

比如,去设置一下这个元素里面的内容 ...

关于 jQuery 的使用方法,可以参考宁皓网的《 jQuery 基础教程》

这里,我们用一个 html 方法,去设置一下这个 el 属性的元素里面的内容 ... 用一个 this.model ,表示当前视图对象的模型 ... 这个模型就是在实例化这个视图的时候,传递进来的那个 ...

然后用 get 方法,可以得到模型里面的属性的值 ... 比如我们要得到 note 模型里的 title 属性 ... 输入 title ...

测试

下面,我们可以去试一下 ...

回到浏览器 ...

先去调用一个视图里面的这个 render 方法 ... 让它去组织一下模型里的数据 ...

noteView.render()

然后再访问一下视图里的 el 属性的值 ...

noteView.el

因为我们在视图里面定义了 render 方法,去组织在模型里面的内容 .... 所以,这里你会发现,在 li 元素里面,会包含在 note 模型里面的 title 属性的值 ...

来自 http://ninghao.net/video/1455#info

模板 - template

 


 

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
集合
集合 - Collection
 
添加模型到集合里
 
从集合中移除模型 - remove, reset, pop, shift
 
push, unshift,at: index
 
事件 - add, remove, change
 
更聪明的添加模型到集合里的方法 - set
 
获取在集合里的模型
 
集合视图
 
路由
路由 - Router
 
地址中的参数
 
地址中的可选部分
 
手工改变地址 - navigate
 
RESTful
RESTful - 准备
 
数据库
 
控制器
 
从数据库中提取数据到集合里
 
提取模型 - fetch
 
添加数据 - save
 
把模型添加到集合里再更新到数据库 - create
 
更新数据
 
删除数据 - destroy
 


 



 

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
普通分类: