笔记参考: 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进行处理时,不需提前申明
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