认识Backbone (二)

  Backbone.Model(模型)

  Models(模型)是任何Javascript应用的核心,包括数据交互及与其相关的大量逻辑: 转换、验证、计算属性和访问控制。Model在Backbone中为数据模型,是最基础,最根本的数据基类。

  创建一个模型对象

  extend Backbone.Model.extend(properties, [classProperties]) 

var World = Backbone.Model.extend({
     initialize: function(){
        console.log(‘创建了一个model对象‘)
     }
});
var world = new World()

  设置和获取属性(数据)

  get model.get(attribute) 从当前model中获取当前属性(attributes)值。

  set model.set(attributes, [options]) 向model设置一个或多个hash属性(attributes)。如果任何一个属性改变了model的状态,在不传入 {silent: true} 选项参数的情况下,会触发 "change" 事件,更改特定属性的事件也会触发。

var World = Backbone.Model.extend({
    defaults: {
        name: ‘lbs‘,
        age: 10
    },
    initialize: function(){
        console.log(‘创建了一个model对象‘)
    }
});
var world = new World()
console.log( world.get(‘age‘) ) //10
world.set({‘age‘:50})
console.log( world.get(‘age‘) ) //50

  自定义方法 

var World = Backbone.Model.extend({
    defaults: {
        text: ‘hello, world!‘
    },
    say: function(){
        console.log( this.get(‘text‘) )
    }
});
var world = new World()
world.say() //hello, world!

  监听属性值的变化   

var World = Backbone.Model.extend({
    defaults: {
        name: ‘lbs‘,
        age: 10
    },
    initialize: function(){
        this.on(‘change:name‘,function(model,value){
            var oldname = model.previous(‘name‘);
            console.log(‘原来的名字是:‘+ oldname +‘ ,现在的名字是:‘ + value)
        })
    }
});
var world = new World()
world.set({‘name‘:‘ccx‘}) //原来的名字是:lbs ,现在的名字是:ccx

  数据验证

   validate model.validate(attributes, options)

var World = Backbone.Model.extend({
    defaults: {
        name: ‘lbs‘,
        age: 10
    },
    initialize: function(){
        this.on(‘invalid‘,function(model,error){
            console.log(error);
        });
    },
    validate: function (attrs) {
        if( !_.isString(attrs.name) ) return ‘姓名必须是字符串‘;
        if( !_.isNumber(attrs.age) ) return ‘年龄必须是数字‘;
    }
});
var world = new World()
//根据验证规则(v1.0.0) {validate:true}
world.set({name:‘ccx‘,age: ‘three‘},{validate:true}) //年龄必须是数字

   在调用set方法时,设置validate为true,开启数据验证不设置validate为true或者设置silent为true,关闭数据验证。

  删除属性(数据)

  unset model.unset(attribute, [options]) 从内部属性散列表中删除指定属性(attribute)。 如果未设置 silent 选项,会触发"change" 事件。

  clear model.clear([options]) 从model中删除所有属性, 包括id属性。 如果未设置 silent 选项,会触发 "change"事件。  

var World = Backbone.Model.extend({
    defaults: {
        name: ‘lbs‘,
        age: 10
    }
});
var world = new World()
world.unset(‘name‘)
console.log( world.get(‘name‘) )  //undefined
world.set({name:‘ccx‘})
console.log( world.get(‘name‘) ) //ccx
console.log( world.get(‘age‘) ) //10
world.clear()
console.log( world.get(‘name‘) )  //undefined
console.log( world.get(‘age‘) )  //undefined

  属性操作

  attributes model.attributes attributes 属性是包含模型状态的内部散列表(实例化后的模型对象的属性都保持在attributes属性对象中)。  

var World = Backbone.Model.extend({
    defaults: {
        name: ‘lbs‘,
        age: 10
    }
});
var world = new World()
console.log( world.attributes ) // Object {name: "lbs", age: 10}

  previous model.previous(attribute) 在 "change" 事件发生的过程中,本方法可被用于获取已改变属性的旧值。

  previousAttributes model.previousAttributes() 返回模型的上一个属性的副本。一般用于获取模型的不同版本之间的区别,或者当发生错误时回滚模型状态。

var World = Backbone.Model.extend({
    defaults: {
        name: ‘lbs‘,
        age: 10
    }
})
var world = new World()
world.on(‘change:name‘,function(model,value){
    var oldname = model.previous(‘name‘);
    var newname = model.get(‘name‘);
    console.log(‘原来的名字是:‘+ oldname +‘,现在的名字是:‘+ newname);
})
world.on(‘change:age‘,function(model,value){
    var attrs = model.previousAttributes();
    var oldage = attrs.age;
    console.log(‘原来的年龄是:‘+ oldage +‘,现在的年龄是:‘+ value)
})
world.set({name:‘ccx‘}) //原来的名字是:lbs,现在的名字是:ccx
world.set({age: 50}) //原来的年龄是:10,现在的年龄是:50

  同步数据

   save model.save([attributes], [options]) 通过委托给Backbone.sync,保存模型到数据库(发送的客户端数据到服务器保存)

var World = Backbone.Model.extend({
    url: ‘backbone-test.php‘,
    defaults: {
        name: ‘lbs‘,
        age: 10
    }
})
var world = new World()
world.set({name:‘ccx‘,age: 50})
//world.save()
world.save(null,{
    success: function(model,response){
        console.log( response.code )
    }
})

//php文件

//设置接收数据的格式
header(‘Content-Type: application/json; charset=utf-8‘);
//获取客户端发送来的数据
$data = json_decode(file_get_contents("php://input"));
/*
 获取各个属性值,保存至服务器中
*/
//返回更新成功的标志
die(json_encode(array(‘code‘=>‘0‘)));

  fetch model.fetch([options]) 通过委托给Backbone.sync从服务器重置模型的状态(获取服务器的数据)

var World = Backbone.Model.extend({
    url: ‘backbone-test.php‘,
    defaults: {
        name: ‘lbs‘,
        age: 10
    }
})
var world = new World()
world.fetch({
    success: function(model,response){
        console.log( world.toJSON() ) //Object {name: "ccx", age: 20, code: 1}
    },
    error: function(error){
        console.log( error )
    }
})

//php文件
$json = array(‘name‘=>‘ccx‘,‘age‘=>20,‘code‘=>1);
echo json_encode($json);

  destroy model.destroy([options]) 通过委托给Backbone.sync,保存模型到数据库

   当调用destroy方法时,将以DELETE请求方式向服务器发送对象的ID数据,服务器接收数据后删除对应的数据记录,并向客户端发送删除成功的标志。

var World = Backbone.Model.extend({
    url: ‘backbone-test.php‘,
    defaults: {
        name: ‘lbs‘,
        age: 10
    },
    idAttribute: ‘code‘
})
var world = new World({
    ‘code‘: 110
})
world.destroy({
    success: function(model,response){
        if(response.code == ‘0‘){
             console.log( model.get(‘code‘) +‘数据已经删除‘ )  // 110数据已经删除
        }
    },
    error: function(error){
        console.log( error )
    },
    wait: true
})

//php文件
echo json_encode(array(‘code‘=>0));
时间: 2024-11-10 08:27:19

认识Backbone (二)的相关文章

Backbone.js学习之二

经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底,从这点,开始认真研究Backbone.js的一些最基本的操作,以便我日后学习能更上一层楼.那就切入主题: 什么是mvc? 简单的理解就是:模型(models),视图(views),控制器(collections).通过视图把浏览器的网址传给控制器,控制器对网址进行解析,然后去模型层获取数据,模型层将

【 js 基础 】【 源码学习 】backbone 源码阅读(二)

最近看完了 backbone.js 的源码,这里对于源码的细节就不再赘述了,大家可以 star 我的源码阅读项目(https://github.com/JiayiLi/source-code-study)进行参考交流,有详细的源码注释,以及知识总结,同时 google 一下 backbone 源码,也有很多优秀的文章可以用来学习. 我这里主要记录一些偏设计方向的知识点.这篇文章主要讲 控制反转. 一.控制反转 上篇文章有说到控制反转,但只是简略的举了个例子,在这里我们详细说一下这个知识点,它其实

浅谈HTML5单页面架构(二)——backbone + requirejs + zepto + underscore

本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)——requirejs + angular + angular-route>探讨了angular+requirejs的一个简单架构,这一篇继续来看看backbone如何跟requirejs结合. 相同地,项目架构好与坏不是说用了多少牛逼的框架,而是怎么合理利用框架,让项目开发更流畅,代码更容易管理.那么带着这个目的,我们来继续探讨backbone. 首

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由

backbone js 入门二

为什么分这么篇,因为我知道有一部分人像我这样,长篇的看不下去啊 三:collection  -----------collection 就是model的集合 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>backbone -collection</title> </head> <bod

backbone实例todos分析(二)view的应用

在上一篇文章中我们把todos这个实例的数据模型进行了简单的分析, 有关于数据模型的操作也都知道了.接着我们来看剩下的两个view的模型,以及它们对页面的操作. 首先要分析下,这个俩view是用来干嘛的.按照自己的想法,一个页面上的操作,直接用一个view来搞定不就行了吗,为何要用两个呢? 我觉得这就是新手和老手的主要区别之一,喜欢在一个方法里面搞定一切,随着时间的推移,再逐渐重构,让代码变得灵活可扩展.但既然我们拿到一个成熟的代码,就应该吸取其中的精华. 我觉得这里面的精华就是,将数据的展示和

Backbone源码分析(二)

在传统MVC框架模式中,Model承担业务逻辑的任务.Backbone作为一个mvc框架,主要的业务逻辑交由Model与Collection来实现.Model代表领域对象,今天主要学一下Model源码中几个重要的函数. 我们先看一下Model的构造函数做了哪些事情: // Create a new model with the specified attributes. A client id (`cid`) // is automatically generated and assigned

TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之二 数据处理

当我们使用jQuery时大部分时间是聚焦于Dom节点的处理,给Dom节点绑定事件等等:前端mvc框架backbone则如何呢? M-Model,Collection等,是聚焦于数据的处理,它把与后台数据的交互封闭好,然后我们使用时可以给数据的变化绑定事件,可以相应的去更新到Dom(这里是View) V-View(Marionette扩展了,有ItemView,CollectionView,CompositeView和LayoutView),则聚焦于处理Dom节点 C-Controller:  R

(二)backbone - demo - user list

Demo介绍 学习了如何基本的使用Backbone,展示用户信息 使用JQuery操作DOM,backbone.localStorage.js操作localstorage 大体实现 •创建user Model 1 var User = Backbone.Model.extend({ 2 defaults: { 3 username: '小强' 4 }, 5 initialize: function() { 6 if (!this.get("username")) { 7 this.se