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是不是挺好理解的................

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

  1. Backbone.js之model篇(一)

    Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web ...

  2. Backbone学习笔记 - Model篇

    2 Model 在Backbone中,Model用于存储核心数据,可以将数据交互相关的逻辑代码放在这里.基本形式如下: var Human = Backbone.Model.extend({ init ...

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

    一.模型属性的一些操作方法 1.mmodel.get()  获取属性的值 2.mmodel.set('age',5) 更新单个属性的值  mmodel.set({name:'aaa',age:6}) ...

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

    “Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换.验证.属性计算和访问控制”. 一.初始化方法 我们先来看一个demo,initialize,这是一个初始化方法,但是写这 ...

  5. Backbone之旅——Collection and View篇

    上篇文章说了Model,这次说说Collection,collection就是model的集合,用来装载model对象的 定义方法 var Persons = new Backbone.Collect ...

  6. Backbone中的model和collection在做save或者create操作时, 如何选择用POST还是PUT方法 ?

    Model和Collection和后台的WEB server进行数据同步非常方便, 都只需要在实行里面添加一url就可以了,backbone会在model进行save或者collection进行cre ...

  7. [Backbone.js]如何处理Model里面嵌入的Collection?

    写了近半个月的backbone.js代码,从一开始的todo到现在做仿微信的网页聊天,其中最大的困惑就在于如何处理比较复杂的Model,其内嵌了一个或者多个Collections. 假设我们有一个Pe ...

  8. Python 踩坑之旅进程篇其三pgid是个什么鬼 (子进程\子孙进程无法kill 退出的解法)

    目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4.1 技术关键字 下期坑位预告 代码示例支持 平台: Centos 6.3 Python: 2.7.14 Github: https: ...

  9. ESP8266开发之旅 网络篇⑯ 无线更新——OTA固件更新

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

随机推荐

  1. 冲刺阶段 day 4

    day4 项目进展 今天上完软件工程后我们便聚在宿舍,总结了一下昨天的工作,讨论完成了昨天未完成的 注册功能,然后趁热打铁,构建了学生管理这部分的窗体搭建及部分代码的编写. 存在的问题 代码记不得.在 ...

  2. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  3. 自制操作系统(二) 让bootsector开机启动打印一首诗

    qq:992591601 欢迎交流 2016-03-31作 2016-06-01.2016-06-27改 我总结了些基本原理: 1.软盘的第一个扇区为启动区 2.计算机读软盘是以512字节为单位来读写 ...

  4. WebLogic 12c SpringMVC Jackson 冲突 java.lang.NoSuchMethodError: TypeFactory.constructParametrizedType(Ljava/lang/Class;Ljava/lang/Class;[Ljava/lang/Class;)

    <?xml version="1.0" encoding="UTF-8"?> <wls:weblogic-web-app xmlns:wls= ...

  5. 【Linux高级驱动】LCD logo

    1.将LOGO图片的大小调整到合适尺寸(480x272) 2. 使用GIMP2生成符合Linux要求的PPM图片文件 启动GIMP2打开通过ACDSEE调整的图片-->    通过菜单 图像模式 ...

  6. atitit.为什么java体系开发效率这样低的原因and解决

    atitit.为什么java体系开发效率这样低的原因and解决 #---开发理念问题(影响度:很大的,2-3倍效率) mvc<>webform server control ajax< ...

  7. javaweb学习总结(十八)——JSP属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  8. J2EE学习笔记-第二章(Web应用初步)

    首先要理解一些概念的词语,到底这些是什么(当我读懂了后,会逐一填补完整,现在我真的有点混淆) web组件-相当于功能性的组件,就像是零件,汽车的轮胎,汽车的门,所有组件组合后,才能成为一辆车,有时候也 ...

  9. python元类

    第一个实例: # coding=utf8 # 手动创建,返回一个类对象 MyShinyClass = type('MyShinyClass', () ,{}) print(MyShinyClass) ...

  10. jinkins在windows上的安装 配置C#编译

    首先jinkins在windows上的安装就不说,安装只需要下载相应安装包就可以了,后有些时候经常需要修改端口号.修改如下: 然后重启jenkins服务 首次运行界面 个人建议插件按需安装. 建立一个 ...