Backbone.js

笔记参考： http://addyosmani.github.io/backbone-fundamentals/#client-side-mvc-single-page-apps

1. Model

（1）get与set：

get取模式的属性值

set可设定模式的多个属性

（2）监听模式的改变

监听模式中具体事件的改变

监听模式具体属性的改变

（3）validation

当{validate：true}作为一个参数在save与set中使用时，若属性valid时，什么也不发生；当invalid，返回错误，一个invalide事件将全被触发，给模式设定一个validationerror属性，若是save中，服务器上的属性不会被更改，同时。

2.Views

views中的render()要绑定到model中的change事件中

（1）el（）

每个view都具有的属性，可将元素内容进行组合，然后插入到DOM中去

可为view设定一个新的元素

tagName（默认为div） 必填

id、className 可选

当申明一个view时，options、el、tagName、id和className是当作函数来用

（2）eland（）

$el （）

$（）

veiw.$el（）——> $(view.el)

view.el（selector）——> $(view.el).find(selector)

this.$el（）用于加载DOM中的元素

this.el（）用于查找"edit"类的子元素

（3）setElement

将已经存在的Backbone View应用于不同的DOM元素当中

setElement可将el从一个移动到到的上面来，还要可以是标记

（4）render（）

（5）the events hash（）

events可用于监听与el相关的选项或当没有选项时，监听el

格式：

'eventName selector': 'callbackFunction'

包括：'eventName selector': 'callbackFunction'

3.Collections

（1）add（）与remove（）

支持单个元素及列表式

在add（）中使用{merge:true}时，将现有的model替换已存在的属性，保留先前多出的属性

（2）Retrival Models

最直接的方法：Collections.get()

id:整数或字符串，用户给出的

cid: client id 当模式被创建时，都存在一个

idAttribute:从服务器端返回的id，eg：存储在database中的id；当服务器端指定一个moddel有一个userId时，则在模式中最好给userId设定值为idAttribute

（3）Listen for events

可以监听add（）与remove（）事件、change（）事件、click事件

（4）once（）

可用于the next time sonething happpes,do this

（5）Collection.set()、Collection.reset（）

Collection.set()可用于将一系列model设定于处于add（）、remove（）与change（）状态

Collection.rest（）可用于重新设定collection中的内容，但不会fire掉任何add（）或remove（）事件；先前的models可以获得options.previousModels

（6）underscore.js中有用的函数

forEach（）：可用于Collection中的遍历模式，取各模式的attribute

sortBy（）：根据Moadel是某一属性进行排序

map（）：通过一个转换函数，对一个Collection进行遍历

max（）与min（）：取出collection中某一属性的最值

plunk（）：从Collection中抽取中抽取出一个具体的属性

filter（）：从Collection中过滤出某些模式

indexOf（）：返回Collection中某些特殊item的下标

any（）some（）：用于确认Collection中的Model是否满足某些条件

size（）：返回Collectin中的Model的长度

isempty（）：判断一个Collection是否为空

groupBy（）：将Collection中根据Model中attribute相同的进行分组

pick（）：从Collection中检索出一系列属性集

omit（）：从Collection中检索出Model中除某些属性外的其他

keys（）与values（）:keys检索Colleciton中Model的attribute的名称，values列出Collecton中Model中各attribute的值

pairs（）：以【keys，values】的形式列出Collecton中的Model

invert（）：创建一个对象，将Keys与values互换

chain（）：用一条语句实现一个对象调用多个方法，以value（）结尾

4.Collection对Server端的操作

（1）Colleciton.fetch（）

Collection中有一个url属性，通过url向Server发送HTTP GET请求，从Server端检索出Models，并以JSON数组的形式返回

（2）Collection.save（）

将Models的id加入到Collection的url中，形成一个新的URL，然后发送一个HTTP PUT到Server

若是一个新建的instance，，假如它没有id，则一个HTTP Post发送到Collection的URL。Collection.create

（3）Collection.delete（）

Collection.remove（）只是移除一个Model

Model.destory（）是向Collection的URL发送HTTP DELETE

若一个模式为isNew时，调用destory时将返回一个false

第一个RESETful API方法接受很多options选项，但是所有的均接受success和error返回值，用于处理服务器端的结果

5.Events

（1）on（）、off（） and trigger（）

针对一个直接观赏的对象，将callback函数直接作用于观察对象

将事件绑定于一个callback进行处理时，不需提前申明

all事件可以绑定于所有的事件中

off（）将绑定于一个对象的callback函数移除

trigger（）可以触发多个事件，同样也可以传递多个参数给callback函数

（2）listenTo（） and stopListening（）

告诉一个object监听另一个对象的events，可以跟踪它所监听到的事件

（3）Events and Views

View可以监听到的事件：DOM事件、使用API事件触发的事件

DOM事件可以使用View的events属性或使用jQuery.on（），在callback中使用events属性进行绑定，this是指View对象；所有直接使用jQuery绑定的callbacks将使用this来设定DOM元素，所有的DOM事件的callbacks都被传递一个event对象。

API事件中，on（）作用于观察对象时，parameter可以作为参数传递；listenTo（）中，callback中的this找的是the listener.

6.Routers

连接URLs

应用中的一些需被bookmarkable、shareable及back-button-able的部分，需要一个URL

（1）Backbone.history

处理应用中的hashchange事件需初始化Backbone.history，可自动地处理已定义好的路由，触发callbacks。

Backbone.history.start（）方法可以告诉Backbone开始监听所有的hashchange事件

（2）router的.navigate（）方法

更新URL让app处于某一个特定的状态，可使用路由的.navigate（）方法，它仅更新URL不会触发hashchange事件

在Router.navigate（）中传递{trigger：true}选项时，在更新URL时同样可以触发route。

router中的一个route的事件也将被触发，在Backbone histroy中被fire掉的时候

7.Backbone的Sync API

若server不能够处理HTTP PUT或HTTP DELETE时，可设定选项emulateHTTP=true;

若server不能够处理application/json请求时，设定emulateJSON=true。

8.Backbone.Marionette

模板： 需用Backbone和Underscore中的template来render一个view；template需直接放进DOM中；需先定义一个view，用于使用template并将model中的数据进行提交。

（1）用Marionette.ItemView减少boilerplate

所有的Marionette中的view类型除Marionette。View，包括render方法，用于处理提交的logic，故可以在实例化过程中继续这些而不是Backbone.View

可以让Marionette帮助我们进行view的render方法，而不是为view提供自己的render方法。仍使用相同的Underscore.js模板，rendering机制，但实现过程是隐藏的。

view的代码如下：

（2）Memory Management

Marionette的view提供了一个close事件

（3）Region Management

Marionette提供了一个Region对象,管理个体views地生命周期，并将其展现在DOM元素中

Marionette.Region可以用于管理Backbone.View