Backbone中的模型

创建model

模型是所有Javascript应用程序的核心，包括交互数据及相关的大量逻辑： 转换、验证、计算属性和访问控制。你可以用特定的方法扩展Backbone.Model，模型也提供了一组基本的管理变化的功能。

Person = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to this world");
    }
});

var person = new Person;

new一个model的实例后就会触发initialize()函数。

设置属性

现在我们想设置一些属性，有两种方式，可以在创建model实例时进行传参，也可以在实例生成后通过model.set(obj)来进行设置。

Person = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to this world");
    }
});

var person = new Person({ name: "Thomas", age: 67});
// or we can set afterwards, these operations are equivelent
var person = new Person();
person.set({ name: "Thomas", age: 67});

# 获取属性

Person = Backbone.Model.extend({
    initialize: function(){
        alert("Welcome to this world");
    }
});

var person = new Person({ name: "Thomas", age: 67, child: 'Ryan'});

var age = person.get("age"); // 67
var name = person.get("name"); // "Thomas"
var child = person.get("child"); // 'Ryan'

设置model默认属性

有的时候你可能会想让model有默认属性值，只要在进行model声明的时候设置个defaults就行了。

Person = Backbone.Model.extend({
    defaults: {
        name: 'Fetus',
        age: 0,
        child: ''
    },
    initialize: function(){
        alert("Welcome to this world");
    }
});

var person = new Person({ name: "Thomas", age: 67, child: 'Ryan'});

var age = person.get("age"); // 67
var name = person.get("name"); // "Thomas"
var child = person.get("child"); // 'Ryan'

监听model的属性改变

我们可以通过model.bind(event,callback)方法来绑定change事件来监听属性改变。下面的这个例子就是在initialize方法中绑定了一个name属性改变的事件监听。 如果person的name属性改变了，就会弹出个对话框显示新值。

Person = Backbone.Model.extend({
    defaults: {
        name: 'Fetus',
        age: 0
    },
    initialize: function(){
        alert("Welcome to this world");
        this.on("change:name", function(model){
            var name = model.get("name"); // 'Stewie Griffin'
            alert("Changed my name to " + name );
        });
    }
});

var person = new Person({ name: "Thomas", age: 67});
person.set({name: 'Stewie Griffin'}); // This triggers a change and will alert()

和服务端交互

服务端实现一个RESTful的url例如/user，可以允许我们通过他与后台交互。

var UserModel = Backbone.Model.extend({
    urlRoot: '/user',
    defaults: {
        name: '',
        email: ''
    }
});

model.urlRoot:如果使用的集合外部的模型，通过指定 urlRoot 来设置生成基于模型 id 的 URLs 的默认 url 函数。 “/[urlRoot]/id”

创建一个新model

如果id为null，则会提交一个POST请求到/user。

var UserModel = Backbone.Model.extend({
    urlRoot: '/user',
    defaults: {
        name: '',
        email: ''
    }
});
var user = new Usermodel();
// Notice that we haven't set an `id`
var userDetails = {
    name: 'Thomas',
    email: 'thomasalwyndavis@gmail.com'
};
// Because we have not set a `id` the server will call
// POST /user with a payload of {name:'Thomas', email: 'thomasalwyndavis@gmail.com'}
// The server should save the data and return a response containing the new `id`
user.save(userDetails, {
    success: function (user) {
        alert(user.toJSON());
    }
})

model.save([attributes], [options]) : 通过委托Backbone.sync保存模型到数据库（或可替代的持久层）。 attributes 散列表 (在 set) 应当包含想要改变的属性，不涉及的键不会被修改。 如果模型含有validate方法，并且验证失败，模型不会保存。 如果模型isNew, 保存将采用 “create” (HTTP POST) 方法, 如果模型已经在服务器存在，保存将采用 “update” (HTTP PUT) 方法.

获取一个model

初始化一个model实例并设置其id属性，并调用fetch方法，这样会请求urlRoot + '/id'地址到后台。

// Here we have set the `id` of the model
var user = new Usermodel({id: 1});

// The fetch below will perform GET /user/1
// The server should return the id, name and email from the database
user.fetch({
    success: function (user) {
        alert(user.toJSON());
    }
})

model.fetch([options]): 从服务器重置模型状态。这对模型尚未填充数据，或者服务器端已有最新状态的情况很有用处。 如果服务器端状态与当前属性不同，则触发change事件。 选项的散列表参数接受success和error回调函数， 回调函数中可以传入(model,response)作为参数。

// 每隔 10 秒从服务器拉取数据以保持模型是最新的
setInterval(function() {
  user.fetch();
}, 10000);

# 更新一个model 当保存的model对象的id不为空时，则会提交一个PUT请求到urlRoot。

// Here we have set the `id` of the model
var user = new Usermodel({
    id: 1,
    name: 'Thomas',
    email: 'thomasalwyndavis@gmail.com'
});

// Let's change the name and update the server
// Because there is `id` present, Backbone.js will fire
// PUT /user/1 with a payload of `{name: 'Davis', email: 'thomasalwyndavis@gmail.com'}`
user.save({name: 'Davis'}, {
    success: function (model) {
        alert(user.toJSON());
    }
});

删除一个model

调用model的destroy方法时，则会提交请求到urlRoot+”/id”

// Here we have set the `id` of the model
var user = new Usermodel({
    id: 1,
    name: 'Thomas',
    email: 'thomasalwyndavis@gmail.com'
});

// Because there is `id` present, Backbone.js will fire
// DELETE /user/1
user.destroy({
    success: function () {
        alert('Destroyed');
    }
});

model.destroy([options]):通过委托HTTP DELETE请求到Backbone.sync销毁服务器上的模型. 接受success和error回调函数作为选项散列表参数。将在模型上触发destroy事件，该事件可以通过任意包含它的集合向上冒泡。

其他方法

model还有一些其他的方法，可以参考api：Backbone.js API中文文档

var person = new Person({ name: "Thomas", age: 67});
var attributes = person.toJSON(); // { name: "Thomas", age: 67}
/* This simply returns a copy of the current attributes. */

var attributes = person.attributes;
/* The line above gives a direct reference to the attributes and you should be careful when playing with it.   Best practise would suggest that you use .set() to edit attributes of a model to take advantage of backbone listeners. */
时间： 2024-03-01 01:55:26

Backbone中的模型的相关文章

详解Backbone.js框架中的模型Model与其集合collection_基础知识

什么是 ModelBackbone 的作者是这样定义 Model 的: Model 是任何一个 web 应用的核心,它包含了交互的数据以及大部分的逻辑.例如:转化.验证.属性和访问权限等. 那么,我们首先来创建一个Model: Person = Backbone.Model.extend({ initialize: function(){ alert("Welcome to Backbone!"); } }); var person = new Person; 上述代码中,我们定义了一

Django中的模型

Django 中的模型主要用于定义数据的来源信息,其包括一些必要的字段和一些对存储的数据的操作.通常,一个模型对应着数据库中的一个表. 简单的概念: Django 中每一个 Model 都继承自 django.db.models.Model. 在 Model 当中每一个属性 attribute 都代表一个数据库字段. 通过 Django Model API 可以执行数据库的增删改查, 而不需要写一些数据库的查询语句. 1. 模型 1.1 一个示例 下面在 myapp 应用种定义了一个 Perso

PHP的Yii框架中Model模型的学习教程_php技巧

模型是 MVC 模式中的一部分, 是代表业务数据.规则和逻辑的对象. 模型是 CModel 或其子类的实例.模型用于保持数据以及与其相关的业务逻辑. 模型是单独的数据对象.它可以是数据表中的一行,或者一个用户输入的表单. 数据对象的每个字段对应模型中的一个属性.每个属性有一个标签(label), 并且可以通过一系列规则进行验证. Yii 实现了两种类型的模型:表单模型和 Active Record.二者均继承于相同的基类 CModel. 表单模型是 CFormModel 的实例.表单模型用于保持

Backbone中View之间传值的学习心得_javascript技巧

Backbone中的View就是用来展示由Model层传出的数据,或者在View里产生的一些数据,包括输入框中输入等产生的数据,由当前View传递到另外一个View层里,应该怎么办呢,我之前读到一位博主<Backbone View的三种通信方式 >写的尤为的清晰,在我实际的项目中,常常使用的也就是最后一种方式. 嘿嘿,分享知识是一件快乐的事情,我就直接借鉴表述一下如下: 直接用 Backbone 作为事件注册机, 代码如下: var ApplicationView = Backbone.Vie

深入讲解CSS中盒模型的用法

  视觉类型的媒体根据CSS的视觉格式化模型(Visual formatting model)的规则来处理文档树中的元素,从而将(X)HTML转化成制作者设计的样子. 例如: 如何生成元素框; 处理各元素之间的关系; 根据框的尺寸.定位等CSS属性来确定元素的位置等; 因此,要掌握使用CSS控制页面内元素的技巧,就需要深入了解框模型(Box Model)及视觉格式化模型的原理. 文档树中的元素都产生矩形的框(Box),这些框影响了元素内容之间的距离.元素内容的位置.背景图片的位置等等.而浏览器根

ZBrush中导出模型和贴图的方法

  您可以把它们留在需要的细化层级上然后用transpose master合并后导出.transpose master 在插件里面,如下图所示. 您还可以利用SubTool的导出插件将模型整体导出,详细教程请参阅ZBrush中模型的整体导出. 这时候模型上的细节会以贴图的方式表现出来,模型当然要退回低细分级别,然后在低模上生成贴图,再把低模和贴图导出到三维软件里用,这是一种次时代的流程,效率比较高也是最能发挥Zbrush功能强大的地方. 保存为Zbrush的源文件格式,细分级别就不会丢失,如果保

Spring MVC 中处理模型数据 （一）ModelAndView ModelMap @sessionAttributes

1.目标方法的返回值可以是 ModelAndView 类型. * 其中可以包括视图和模型信息 * SpringMVC 会把 ModelAndView 的 model 中数据放到 request 域对象中. 2.目标方法可以添加Map 类型(实际上也可以是Model类型 或 ModelMap类型)的参数. 3.@sessionAttributes 除了可以通过属性名制定需要放到会话中的属性外(实际上使用的是value属性值) * 还可以通过模型属性的对象类型制定哪些模型属性需要放到会话中(实际上使

并行计算的3中基本模型

1.PRAM模型 PRAM(Parallel Random Access Machine)模型是单指令流多数据流(SIMD)并行机中的一种具有共享存储的模型.它假设有一个无限大容量的共享存储器,并且有多个功能相同的处理器,在任意时刻处理器可以访问共享存储单元. 分类: 根据是否可以同时读写,它又分为以下三类:PRAM-EREW,PRAM-CREW,PRAM-CRCW(其中C代表Cuncurrent,意为允许并发操作,E-代表Exclusive,意味排斥并发操作).在PRAM中有一个同步时钟,所有

详解 DNN 在声学应用中的模型训练

本文通过简单kaldi源码,分析DNN训练声学模型时神经网络的输入与输出.在进行DNN训练之前需要用到之前GMM-HMM训练的模型,以训练好的mono模型为例,对模型进行维特比alignement(对齐),该部分主要完成了每个语音文件的帧到 transition-id 的映射. 不妨查看对齐后的结果: $ copy-int-vector "ark:gunzip -c ali.1.gz|" ark,t:- | head -n 1 speaker001_00003 4 1 1 1 1 1