bankbone 模型简单介绍

 

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)
        })
    }
})