博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Backbone中的模型
阅读量:5960 次
发布时间:2019-06-19

本文共 5283 字,大约阅读时间需要 17 分钟。

创建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 equivelentvar 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"); // 67var 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"); // 67var 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 modelvar user = new Usermodel({
id: 1});// The fetch below will perform GET /user/1// The server should return the id, name and email from the databaseuser.fetch({
success: function (user) {
alert(user.toJSON()); }})

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

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

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

// Here we have set the `id` of the modelvar 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 modelvar 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销毁服务器上的模型. 接受successerror回调函数作为选项散列表参数。将在模型上触发destroy事件,该事件可以通过任意包含它的集合向上冒泡。

其他方法

model还有一些其他的方法,可以参考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. */

转载地址:http://ywfax.baihongyu.com/

你可能感兴趣的文章
需求分析
查看>>
Line: 220 - com/opensymphony/xwork2/spring/SpringObjectFactory.java:220:-1
查看>>
跟踪被锁的AD账号
查看>>
Python 学习笔记 - 递归和模块中的特殊变量
查看>>
redis 安装配置
查看>>
oracle 常用命令大汇总
查看>>
2012年春运火车票电话和网上订票技巧、攻略
查看>>
运维工程师的职责和前景
查看>>
Gcc编译流程解析
查看>>
迈出第一步
查看>>
根据request获取请求路径
查看>>
mysql 并行复制
查看>>
傲不可长,欲不可纵,乐不可极,志不可满——提高个人修养
查看>>
linux系统增加swap容量的方法
查看>>
远程推送
查看>>
后台调用gps
查看>>
HTML5标签的语义认知和理解(1)
查看>>
MySQL日志功能详解(2)
查看>>
Ubuntu12.04下安装PHP、MySQL和Apache
查看>>
NTFS格式与FAT32格式之间如何转换
查看>>