backbone是基于MVC模型实现的一款前端框架,在backbone中强化了模型和视图模块,弱化了控制器模块.
backbone中用户可以通过控制视图触发事件,可以通过控制器改变路由,控制器可以控制视图,通过在不同路由下渲染不同页面,控制器可以控制模型,通过在不同路由下获取不同的页面信息数据,视图可以更改模型,通过在视图触发交互时候,更改模型的数据,模型可以更改视图,通过当数据改变时,更改视图的显示.
先介绍下backbone的模型(model)
创建模型可以通过两种方式
第一种通过new关键字创建一个模型
var Model = new Backbone.Model()
第二种通过extend方式继承一个模型,这种方式是常用方式不会污染全局的Backbone对象
var Product = Backbone.Model.extend({})
var productModel = new Product;
模型实例化对象有三个属性
attributes 模型具有的所有属性
changed 模型更改过的属性
cid 模型在创建是会自动添加一个cid,这个cid是唯一的
在创建的Model对象中可以添加配置对象
为模型添加默认属性可以通过default属性,属性值是一个对象,对象中的属性名称是默认的属性的名称,属性值是默认属性的值
var Product = Backbone.Model.extend({ defaults: { color :"red" } })
initialize 类的构造函数
这个构造函数在创建实例化对象之前执行
var Product = Backbone.Model.extend({ initialize: function () { } })
toJSON
将模型实例化对象转为json对象
var product = new Product({ color : "red" width: 110 }) console.log(product1.toJSON());
get
获取模型实例化对象中的属性,可以传入字符串表示获取的属性名称
product.get('width')
set
设置属性
可以接收两个参数
第一个参数表示设置的属性名称,
第二个表示设置的属性值
可以接收一个对象
对象的属性名称表示设置的数据属性名称
对象的属性值表示设置的数据属性值
product.set('width', 150)
product.set({
price: 1000,
color: "red"
})
event 事件
backbone可以让我们自定义事件,在initialize函数内部可以通过this访问实例化对象,在实例化对象原型上有一个on方法这个方法与jQuery中的on方法很像,我们可以通过on方法订阅事件,在on方法中有两个参数
第一个参数表示监听的事件名称,有两个事件可以监听一个是add另一个是change
第二个参数是一个回调函数
在修改模型时候会触发change事件,我们可以监听change事件,backbone也支持命名空间,可以在监听的事件后面用冒号后面是监听的属性名称
var Product = Backbone.Model.extend({ // 添加构造函数, initialize: function (obj) { // this.on('change', function (model) { //model是模型实例化对象 // }) // 只监听price改变事件 this.on('change:price', function (model) { console.log( model) }) } })