GVKun编程网logo

详解Backbone.js框架中的模型Model与其集合collection（backbone.js中文教程）

12

在本文中，我们将为您详细介绍详解Backbone.js框架中的模型Model与其集合collection的相关知识，并且为您解答关于backbone.js中文教程的疑问，此外，我们还会提供一些关于Ba

在本文中，我们将为您详细介绍详解Backbone.js框架中的模型Model与其集合collection的相关知识，并且为您解答关于backbone.js中文教程的疑问，此外，我们还会提供一些关于Backbone React Requirejs 应用实战(二)——使用Backbone Model、backbone 的collection.fetch() 的异步问题、backbone.js – Backbone Model.fetch返回数据但不更新模型、backbone.js – Backbone model.save()导致POST而不是PUT的有用信息。

本文目录一览：

详解Backbone.js框架中的模型Model与其集合collection（backbone.js中文教程）

详解Backbone.js框架中的模型Model与其集合collection（backbone.js中文教程）

什么是 Model

Backbone 的作者是这样定义 Model 的：

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

rush:js;"> 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 的属性：

rush:js;"> 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() 方法，我们可以获得属性：

rush:js;"> Person = Backbone.Model.extend({ initialize: function(){ alert("Welcome to Backbone!"); } });

var person = new Person({ name: "StephenLee",age: 22});

var age = person.get("age"); // 22
var name = person.get("name"); // "StephenLee"

设置 Model 默认属性

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

rush:js;"> 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 值，则为默认值 30
var name = person.get("name"); //实例化制定了 name 值，则为 "StephenLee"

使用 Model 属性

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

rush:js;"> Person = Backbone.Model.extend({ defaults: { name: "LebronJames",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 为 coding
var hobby = person.get("hobby"); // "coding"

监听 Model 属性的改变

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

rush:js;"> Person = Backbone.Model.extend({ defaults: { name: "LebronJames",initialize: function(){ alert("Welcome to Backbone!"); this.on("change:name",function(model){ var name = model.get("name"); // 'KobeBryant' alert("Changed my name to " + name ); }); } });

var person = new Person();

var age = person.set({name : "KobeBryant"});

通过上述代码，我们知道了如何对 Model 的某个属性进行监听。假设我们需要对 Model 所有的属性进行监听，则使用 'this.on("change",function(model){}); 。

服务器与 Model 的数据交互

前文中已提到 Model 包含了交互的数据，所以它的作用之一便是承载服务器端传来的数据，并与服务器端进行数据交互。现在我们假设服务器端有一个 MysqL 的表 user,该表有三个字段 id,name,email 。服务器端采用 REST 风格与前端进行通信，使用 URL：/user 来进行交互。我们的 Model 定义为：

rush:js;"> var usermodel = Backbone.Model.extend({ urlRoot: '/user',defaults: { name: '',email: '' } });

创建一个 Model

Backbone 中每个 Model 都拥有一个属性 id，它与服务器端数据一一对应。如果我们希望在服务器端的 MysqL 表 user 中新增一条记录，我们只需要实例化一个 Model，然后调用 save() 方法即可。此时 Model 实例的属性 id 为空，即说明这个 Model 是新建的，因此 Backbone 将会向指定的 URL 发送一个 POST 请求。

rush:js;"> var usermodel = Backbone.Model.extend({ urlRoot: '/user',email: '' } });

var user = new usermodel();
//注意，我们并没有在此定义 id 属性
var userDetails = {
name: 'StephenLee',email: 'stephen.lee@mencoplatform.com'
};

//因为 model 没有 id 属性，所以此时使用 save() 方法，Backbone 会向服务器端发送一个 POST 请求，服务器端收到数据后，将其存储，并返回包含 id 的信息给 Model
user.save(userDetails,{
success: function (user) {
alert(user.toJSON());
}
})

此时，在服务器端 MysqL 的 user 表里多了一条 name 为 StephenLee,email 为 stephen.lee@mencoplatform.com 的记录。

取得一个 Model

刚刚我们已经创建了一个 Model，并将它存储到了服务器端的数据库中，假设创建 Model 时，服务器端返回的 id 属性值为 1，此时，我们通过 id 的值就可以将已存储的数据取回。当我们用 id 属性值初始化一个 Model 实例时，通过 fetch() 操作，Backbone 将会向指定的 URL 发送一个 GET 请求。

rush:js;"> var user = new usermodel({id: 1});//初始化时指定 id 的值

//利用 fetch() 方法将会向 user/1 请求数据，服务器端将会返回完整的 user 记录，包含 name,email 等信息
user.fetch({
success: function (user) {
alert(user.toJSON());
}
})

更新一个 Model

如果我们需要对已经存储的 user 记录进行修改，利用已知的 id 值，同样使用 save() 方法，但因为此时 id 不为空，Backbone 将会向指定的 URL 发送一个 PUT 请求。

rush:js;"> var user = new usermodel({ id: 1,name: 'StephenLee',email: 'stephen.lee@mencoplatform.com' });//实例化时指定 id 值

//因为指定了 id 值，此时使用 save() 方法，Backbone 将会向 user/1 发送 PUT 请求，将会对数据库中 id 为1的记录的 email 修改
user.save({email: 'newemail@qq.com'},{
success: function (model) {
alert(user.toJSON());
}
});

删除一个 Model

如果我们需要删除数据库中的记录，利用已知的 id 值，使用 destroy() 方法即可。此时，Backbone 将会向指定的 URL 发送一个 DELETE 操作。

rush:js;"> var user = new usermodel({ id: 1,email: 'stephen.lee@mencoplatform.com' });//实例化时指定 id 值

//因为指定了 id 值，此时使用 destroy() 方法，Backbone 将会向 user/1 发送 DELETE 请求，服务器端接收请求后，将会在数据库中删除 id 为 1的数据
user.destroy({
success: function () {
alert('Destroyed');
}
});

什么是 Collection

简而言之，Backbone 中的 Collection 就是 Model 的一个有序集合，比如，它可能会在以下情况中用到:

rush:plain;"> Model: Student,Collection: Classstudents Model: Todo Item,Collection: Todo List Model: Animal,Collection: Zoo

Collection 一般只使用同一类型的 Model，但是 Model 可以属于不同类型的 Collection，比如：

rush:plain;"> Model: Student,Collection: Gym Class Model: Student,Collection: Art Class Model: Student,Collection: English Class

创建一个 Collection

rush:js;"> //定义 Model Song var Song = Backbone.Model.extend({ defaults: { name: "Not specified",artist: "Not specified" },initialize: function(){ console.log("Music is the answer"); } });

//定义 Collection Album
var Album = Backbone.Collection.extend({
model: Song //指定 Collection 内的 Model 为 Song
});

var song1 = new Song({ name: "How Bizarre",artist: "OMC" });
var song2 = new Song({ name: "Sexual Healing",artist: "Marvin Gaye" });
var song3 = new Song({ name: "Talk It Over In bed",artist: "OMC" });

var myAlbum = new Album([ song1,song2,song3]);
console.log( myAlbum.models ); // 输出为 [song1,song3]

Backbone React Requirejs 应用实战(二)——使用Backbone Model

Backbone React Requirejs 应用实战(二)——使用Backbone Model

在一篇《Backbone React Requirejs 应用实战(一)——RequireJS管理React依赖》，我们介绍了如何使用Requirejs管理我们的JS，这一篇让我们来看看如何使用model。

react.backbone

react.backbone简介

项目首页: https://github.com/clayallsopp/react.backbone

Plugin for React to make Backbone integration easier. Initialize your component with a Backbone.Model or Backbone.Collection; when the model or collection changes, #render will be called.

安装

bower install react.backbone --save-dev

README上有这样一个例子:

var UserViewComponent = React.createBackboneClass({
    changeOptions: "change:name", // DEFAULT is "change",
    render: function() {
        return (
          <div>
              <h1>{this.getModel().get("name")}</h1>
          </div>
        );
    }
});

var user = new Backbone.Model();
var UserView = React.createFactory(UserViewComponent);
var userView = UserView({model: user});

可惜太长了。让我们来作一个简单的例子:

React使用Backbone Model

记得在上一篇中，我们提到了router，在Router里的project是这样子的:

    project: function(){
        var user = new UserModel({name: ''phodal''});
        var UserView = React.createFactory(ProjectComponent);
        var userView = new UserView({model: user});
        React.render(userView, document.getElementById(''main_content''));
    },

而UserModel则是一个简单的model

define([''backbone''], function(Backbone) {
    var UserModel = Backbone.Model.extend({
        initialize : function(name) {
            this.name = name;
        },
        defaults:{
            name:null
        }
    });

    return UserModel;
});

我们用到了一个叫ProjectComponent的component，最后将它渲染到main_content这个id上。

我们的projectcomponent是这样子的:

define([
    ''react'',
    ''react.backbone''
],function(React){
    return React.createBackboneClass({
        render: function () {
            return (
                <div>
                    <h1>{this.getModel().get(''name'')}</h1>
                    Project
                </div>);
        }
    });
});

从我们的model里面获取``name`。

这样，我们就可以简单地在我们的应用中使用Backbone Model。

其他

Github: https://github.com/phodal/backbone-react

backbone 的collection.fetch() 的异步问题

backbone 的collection.fetch() 的异步问题

这段代码的：“this.remarks.add(self.model);”在任何函数中始终报出this.remarks是空的。

 app.RemarkEditView = Backbone.View.extend({
    el: ''.m-remark'' ,
    tagName: ''div'',
    className: ''remark'',
    template: _.template( $(''#remarkEditor'').html() ),
    events: {
        ''click .save'': ''saveRemark'',
        ''click .del'': ''changeEditor''
    },
    initialize: function() {
        var self = this;
        this.remarks = new app.RemarkCollection();
        this.model = new app.Remark({student_id:239, content:''还没有建立评语''});
        this.remarks.fetch();
        this.remarks.add(self.model);
    this.render();  
       this.listenTo(this.remarks, ''add'', this.sss );
    },
..................

改成下面这段就好了

app.RemarkEditView = Backbone.View.extend({
    el: ''.m-remark'' ,
    tagName: ''div'',
    className: ''remark'',
    template: _.template( $(''#remarkEditor'').html() ),
    events: {
        ''click .save'': ''saveRemark'',
        ''click .del'': ''changeEditor''
    },
    initialize: function() {
        var self = this;
        this.remarks = new app.RemarkCollection();
        this.model = new app.Remark({student_id:239, content:''还没有建立评语''});
        this.remarks.fetch({rest:true})
            .done(function(){
                if( self.remarks.length > 0 ){
                    self.model = self.remarks.first();
                }else{
                    self.remarks.add(self.model);
                }
                self.render();
            })
            .fail(function(){
                self.remarks.add(self.model);
                self.render();
            });

        this.listenTo(this.remarks, ''add'', this.sss );


    },


.................

backbone.js – Backbone Model.fetch返回数据但不更新模型

backbone.js – Backbone Model.fetch返回数据但不更新模型

当从服务器获取模型时,我遇到了一个问题.我在chrome dev工具中看到从服务器返回的正确 JSON,但模型不会使用返回的值进行更新. 
var listtemplate = new ListTemplateModel.Model({id: id});
listtemplate.fetch();

此时我在Chrome开发工具中看到了正确的数据.以下是从服务器返回的内容：

{
  "title": "Template one","id": "template_one","steps": [
    {
      "description": "I love it","id": 1,"created_at": "2012-12-24T18:01:48.402Z"
    },{
      "description": "This is rubbish!","created_at": "2012-12-24T18:01:48.402Z"
    }
  ],"created_at": "2012-12-24T18:01:48.402Z"
}

但是控制台记录JSON只显示默认值和模型创建期间传入的id.

console.log(listtemplate.toJSON());

这会返回：

{id: "template_one",title: "",steps: Array[0]}

我的模型看起来像这样(我使用的是Require.js,因此模型已经重命名为上面的ListTemplateModel)

var Model = B.Model.extend({
        defaults: {
            title: '',id: 0,steps: []
        },urlRoot: 'xxx'
    });

有任何想法吗？

编辑
@ Amulya的回答让我走上正轨,然后我发现了“那么”.希望这可以帮助有人遇到同样的问题：

listtemplate.fetch().then(function(){
   //update the view
});

解决方法

原因可能是因为您不等待获取完成.试试这个： 
var listtemplate = new ListTemplateModel.Model({id: id});
listtemplate.fetch({
    success: function() {
        // fetch successfully completed
        console.log(listtemplate.toJSON());
    },error: function() {
        console.log('Failed to fetch!');
    }
});

backbone.js – Backbone model.save()导致POST而不是PUT

backbone.js – Backbone model.save()导致POST而不是PUT

我有一个Backbone模型： 
var User = Backbone.Model.extend({
  idAttribute: '_id',url: '/api/user',defaults:
    { username: ''
    }
});

我拿它：

var user = new User();

user.fetch();

现在,作为我的一个观点中的点击事件,我有：

toggleSubscription: function () {
  user.set('subscriptions',true);
  user.save();
}

这会导致POST请求.但是,记录已经存在于服务器上,并且因为我获取它(并且模型实例具有id属性),我认为Backbone应该执行PUT而不是POST.为什么它可能会做一个POST呢？

解决方法

尝试检查user.isNew().

看起来你创建了一个没有ID的新模型,这就是为什么它试图在Backbone.sync期间添加它.

更新：

以上是完全正确的.它执行POST是因为它是一个新模型(这意味着它没有id).在获取模型之前,您需要为其提供ID.在你的例子中：

var user = new User();
user.fetch();
user.save(); // in XHR console you see POST

var user = new User({ id: 123 });
user.fetch();
user.save(); // in XHR console you see PUT

今天关于详解Backbone.js框架中的模型Model与其集合collection和backbone.js中文教程的介绍到此结束，谢谢您的阅读，有关Backbone React Requirejs 应用实战(二)——使用Backbone Model、backbone 的collection.fetch() 的异步问题、backbone.js – Backbone Model.fetch返回数据但不更新模型、backbone.js – Backbone model.save()导致POST而不是PUT等更多相关知识的信息可以在本站进行查询。

本文标签：

上一篇全面解析JavaScript的Backbone.js框架中的Router路由（js router）

下一篇如何使用userAgent检测移动设备（user agent 检测）

相关文章