首页 > 语言 > JavaScript > 正文

详解Backbone.js框架中的模型Model与其集合collection

2024-05-06 14:58:46
字体:
来源:转载
供稿:网友

什么是 Model
Backbone 的作者是这样定义 Model 的:

Model 是任何一个 web 应用的核心,它包含了交互的数据以及大部分的逻辑。例如:转化、验证、属性和访问权限等。
那么,我们首先来创建一个Model:

Person = Backbone.Model.extend({  initialize: function(){    alert("Welcome to Backbone!");  }});var person = new Person;

上述代码中,我们定义了一个名为 Person 的 Model,实例化后,得到 person。任何时候当你实例化一个 Model,都会自动触发 initialize() 方法(这个原则同样适用于 collection, view)。当然,定义一个 Model 时,并非强制要求使用 initialize() 方法,但是随着你对 Backbone 的使用,你会发现它不可或缺。

设置 Model 属性
现在我们想在创建 Model 实例时传递一些参数用来设置 Model 的属性:

Person = Backbone.Model.extend({  initialize: function(){    alert("Welcome to Backbone!");  }});//在实例化 Model 时直接设置var person = new Person({ name: "StephenLee", age: 22 });//我们也可以在 Model 实例化后,通过 set() 方法进行设置var person = new Person();person.set({ name: "StephenLee", age: 22});

获得 Model 属性
使用 Model 的 get() 方法,我们可以获得属性:

Person = Backbone.Model.extend({  initialize: function(){    alert("Welcome to Backbone!");  }});var person = new Person({ name: "StephenLee", age: 22});var age = person.get("age"); // 22var name = person.get("name"); // "StephenLee"

设置 Model 默认属性
有时你希望 Model 实例化时本身就包含一些默认的属性值,这个可以通过定义 Model 的 defaults 属性来实现:

Person = Backbone.Model.extend({  defaults: {    name: "LebronJames",    age: 30,  },  initialize: function(){    alert("Welcome to Backbone!");  }});var person = new Person({ name: "StephenLee"});var age = person.get("age"); // 因为实例化时未指定 age 值,则为默认值 30var name = person.get("name"); //实例化制定了 name 值,则为 "StephenLee"

使用 Model 属性
你可以在 Model 中自定义方法来使用 Model 内的属性。(所有自定义的方法默认为 public)

Person = Backbone.Model.extend({  defaults: {    name: "LebronJames",    age: 30,    hobby: "basketball"  },  initialize: function(){    alert("Welcome to Backbone!");  },  like: function( hobbyName ){    this.set({ hobby: hobbyName });  },});var person = new Person({ name: "StephenLee", age: 22});person.like("coding");// 设置 StephenLee's hobby 为 codingvar hobby = person.get("hobby"); // "coding"

监听 Model 属性的改变
根据 Backbone 的机制,我们可以给对 Model 的任意属性进行监听,接下来,我们尝试在 initialize() 方法中绑定 Model 一个的属性进行监听,以属性 name 为例:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选