Backbone之旅——Model篇

Backbone作为前端的MVC框架,把后端的设计思想带到前端,使前端代码更加清晰、可维护性大大提高

Backbone依赖于underscore.js和jquery,所以在使用backbone的时候一定要引入这两个常用的js库,jquery应该算是web前端的标配了吧,undersocre也是一个很通用的库,在nodejs中同样也使用。此处有个坑,三个js库的引用是有顺序的,jquery、underscore、backbone一定要按照这个顺序,并且所有的js要放到body的后面也就是页面的底部

Backbone主要有4部分组成,Model、View、Collections和Router

Model:很明显数据模型

View:展示页面

Collections:装载Model对象的集合

Router:前端路由,这个在实现单页应用的时候非常实用,很好的控制页面的跳转和返回

接下来学习Model

定义一个简单的model

var Person = Backbone.Model.extend({

  url:"/tt/save",

  initialize: function(){

    console.log("create person model");

    this.bind("invalid", function(model, error){

      if(error){

        console.log(error);

      }

      });

this.bind("change:name", function(){

      var name = this.get("name");
      console.log("你改变了name属性: " + name);

});

  },

  defaults:{

name:null

},

  validate: function(attributes){

     if(attributes.name === ""){

       return "name不能为空";  

     }

}

});

var person = new Person;//实例化一个person对象,这样就完成了一个简单Model对象

//initialize:就是构造函数

//defaults:对形默认的属性,同样可以使用person.set({});进行赋值

//validate:就是对模型的属性进行验证,但是一定要监听invalid,并且只有在model执行save的时候才能被触发,但是如果要再set的时候执行的话,那么需要

person.set({}, {"validate": true});这样就手动触发了,在执行set的是触发

//change:这个会知道model的属性被set改变时触发,

//url:这个就牛逼了,Model在执行save的时候会和服务器进行数据交换,是通过Backbone.sync来实现的,其实就是jquery的ajax,主要是集中请求方式的对应,

create、update、read、delete,会对应到http请求的post、put、get、delete,所以这个地方是需要用到restful格式的api(这个自己慢慢看吧),

在model中配置了url,默认的save,在没有初始化属性的model时触发的是create(post),若存在初始化属性则触发的是update(put),这就需要在后端配置路由的时候注意了

person.save();//则会触发create,若存在model则触发update,

使用fetch来自定义请求,只不过fetch触发的是read

person.fetch({

  url:"/tt/man",

  success:function(model, res){},

  error: function(){

    console.log("error");

  }

});

model是不是挺好理解的................

时间: 2024-10-12 22:03:14

Backbone之旅——Model篇的相关文章

Backbone.js之model篇(一)

Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web 前端交互应用. Backbone 主要包括 models, collections, views 和 events, controller. (一)model 关于 backbone,最基础的一个东西就是 model,这个东西就像是后端开发中的数据库映射那个 model 一样,也是数据对象的模型,

backbone.js之Model篇 简单总结和深入(2)

一.模型属性的一些操作方法 1.mmodel.get()  获取属性的值 2.mmodel.set('age',5) 更新单个属性的值  mmodel.set({name:'aaa',age:6})  更新多个属性的值  在设置属性值时,如果该属性不存在,会自动创建该属性:同时会以true的形式返回一个模型的引用. 3.mmodel.unset('age')  从模型中删除一个属性 4.mmodel.clear()  从模型中删除所有的属性 5.mmodel.has('age') 检查是否存在某

backBone.js之Model篇 (1) 简单实例

“Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换.验证.属性计算和访问控制”. 一.初始化方法 我们先来看一个demo,initialize,这是一个初始化方法,但是写这段代码之前,首先要在<head>元素中导入3个相应的库文件,即jQuery框架.Backbone主框架和依赖库Underscore.需要注意它们导入页面的顺序,由于代码是按照自上而下的顺序进行执行的,因此先导入jQuery框架文件:Backbone依赖于Underscore库,因此在导入Under

Backbone之旅——Collection and View篇

上篇文章说了Model,这次说说Collection,collection就是model的集合,用来装载model对象的 定义方法 var Persons = new Backbone.Collection.extend({ model: person, initialize:function(){} }); 上面就定义了一个简单的collection,关联的Model就是上篇文章定义的Person collection一般是用来去集合数据的,所以会配置View一块使用,下面来定义一个View

LINQ之旅—高级篇

(1)Part 1:LINQ之旅—基础篇 (2)Part 2:LINQ之旅—进阶篇 (3)Part 3:LINQ之旅—高级篇

LINQ之旅—基础篇

(1)Part 1:LINQ之旅—基础篇 (2)Part 2:LINQ之旅—进阶篇 (3)Part 3:LINQ之旅—高级篇

LINQ之旅—进阶篇

(1)Part 1:LINQ之旅—基础篇 (2)Part 2:LINQ之旅—进阶篇 (3)Part 3:LINQ之旅—高级篇

Objective-C学习之旅 第二篇

Objective-C学习之旅 第二篇 Objective-C 字符串处理 //苹果从iOS5开始,就引入了ARC这种内存管理技术,目的就是消除繁琐而容易出错的手工内存管理行为. //如果项目是ARC的,那么就不能调用原来的retain, release, autorelease,而且dealloc也不再需要内存维护相关的代码. //也就是说下面的例子中,如果在ARC模式下,就不用[astring release]; /**************************************

ESP8266开发之旅 基础篇① 走进ESP8266的世界

本博客由 单片机菜鸟 个人撰写,仅仅做个人技术交流分享,不做任何商业用途,不经允许,切勿转载.如有不对之处,请留言,本人及时更改. 一.基础篇 ESP8266开发之旅 基础篇① 走进ESP8266的世界 ESP8266开发之旅 基础篇② 如何安装ESP8266的Arduino开发环境 ESP8266开发之旅 基础篇③ ESP8266与Arduino的开发说明 ESP8266开发之旅 基础篇④ ESP8266与EEPROM ESP8266开发之旅 基础篇⑤ ESP8266 SPI通信和I2C通信