熟悉 Backbone(一) : 什么是 Model

Backbone 的作者是如许定义 Model 的:

Model 是任何一个 web 运用的中心,它包括了交互的数据以及大部分的逻辑。比方:转化、考证、属性和接见权限等。

那末,我们首先来建立一个Model

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

var person = new Person;

上述代码中,我们定义了一个名为 PersonModel,实例化后,获得 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 属性

运用 Modelget() 要领,我们能够获得属性:

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 实例化时自身就包括一些默许的属性值,这个能够经由过程定义 Modeldefaults 属性来完成:

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

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 为 coding
var hobby = person.get("hobby"); // "coding"

监听 Model 属性的转变

依据 Backbone 的机制,我们能够给对 Model 的恣意属性举行监听,接下来,我们尝试在 initialize() 要领中绑定 Model 一个的属性举行监听,以属性 name 为例:

Person = Backbone.Model.extend({
    defaults: {
        name: "LebronJames",
        age: 30,
    },
    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 定义为:

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

建立一个 Model

Backbone 中每一个 Model 都具有一个属性 id,它与服务器端数据一一对应。假如我们愿望在服务器端的 mysqluser 中新增一条纪录,我们只须要实例化一个 Model,然后挪用 save() 要领即可。此时 Model 实例的属性 id 为空,即申明这个 Model 是新建的,因而 Backbone 将会向指定的 URL 发送一个 POST 要求。

var UserModel = Backbone.Model.extend({
    urlRoot: '/user',
    defaults: {
        name: '',
        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());
    }
})

此时,在服务器端 mysqluser 内外多了一条 nameStephenLee,emailstephen.lee@mencoplatform.com 的纪录。

获得一个 Model

方才我们已建立了一个 Model,并将它存储到了服务器端的数据库中,假定建立 Model 时,服务器端返回的 id 属性值为 1,此时,我们经由过程 id 的值就能够将已存储的数据取回。当我们用 id 属性值初始化一个 Model 实例时,经由过程 fetch() 操纵,Backbone 将会向指定的 URL 发送一个 GET 要求。

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 要求。

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 操纵。

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

//由于指定了 id 值,此时运用 destroy() 要领,Backbone 将会向 user/1 发送 DELETE 要求,服务器端吸收要求后,将会在数据库中删除 id 为 1的数据
user.destroy({
    success: function () {
        alert('Destroyed');
    }
});

参考

http://backbonetutorials.com/what-is-a-model/

    原文作者:StephenLee
    原文地址: https://segmentfault.com/a/1190000000465965
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞