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是不是挺好理解的................
Backbone之旅——Model篇的更多相关文章
- Backbone.js之model篇(一)
Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web ...
- Backbone学习笔记 - Model篇
2 Model 在Backbone中,Model用于存储核心数据,可以将数据交互相关的逻辑代码放在这里.基本形式如下: var Human = Backbone.Model.extend({ init ...
- backbone.js之Model篇 简单总结和深入(2)
一.模型属性的一些操作方法 1.mmodel.get() 获取属性的值 2.mmodel.set('age',5) 更新单个属性的值 mmodel.set({name:'aaa',age:6}) ...
- backBone.js之Model篇 (1) 简单实例
“Model是js应用的核心,包括基础的数据以及围绕着这些数据的逻辑:数据转换.验证.属性计算和访问控制”. 一.初始化方法 我们先来看一个demo,initialize,这是一个初始化方法,但是写这 ...
- Backbone之旅——Collection and View篇
上篇文章说了Model,这次说说Collection,collection就是model的集合,用来装载model对象的 定义方法 var Persons = new Backbone.Collect ...
- Backbone中的model和collection在做save或者create操作时, 如何选择用POST还是PUT方法 ?
Model和Collection和后台的WEB server进行数据同步非常方便, 都只需要在实行里面添加一url就可以了,backbone会在model进行save或者collection进行cre ...
- [Backbone.js]如何处理Model里面嵌入的Collection?
写了近半个月的backbone.js代码,从一开始的todo到现在做仿微信的网页聊天,其中最大的困惑就在于如何处理比较复杂的Model,其内嵌了一个或者多个Collections. 假设我们有一个Pe ...
- Python 踩坑之旅进程篇其三pgid是个什么鬼 (子进程\子孙进程无法kill 退出的解法)
目录 1.1 踩坑案例 1.2 填坑解法 1.3 坑位分析 1.4.1 技术关键字 下期坑位预告 代码示例支持 平台: Centos 6.3 Python: 2.7.14 Github: https: ...
- ESP8266开发之旅 网络篇⑯ 无线更新——OTA固件更新
授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...
随机推荐
- 团队项目--站立会议DAY5
第五次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:继续对钟灵毓秀和赵莹同学编写的代码进行进一步审核及辅助. 2.钟灵毓秀:继续完善相关功能代码,逐步整理出各 ...
- [安卓] 3、EditText使用小程序
这里比较简单,看下面代码就能知道了:在按钮的点击事件时用String str = et.getText().toString();获取文本内容. public class MainActivity e ...
- java web面试题,收集
java面试题: http://www.codeceo.com/article/java-interview-question.html(很多题都很废) http://www.php100.com/h ...
- PHP动态压缩js,css
PHP动态压缩js,css 列表项 标签: PHP 正式发布产品时,我们希望将项目里的js,css合并压缩,以减少http请求.防止轻易查看源代码. 使用 只需要在头部引入一下代码即可: <me ...
- CSS3 圆角制作的消息提示图标
CSS3 圆角制作的消息提示图标,如果你想知道它是如何被开发的,请点击连接查看.http://www.gbtags.com/gb/rtreplayerpreview/142.htm
- 为ubuntu操作系统增加root用户
1:当安装好虚拟机,安装好Ubuntu操作系统后,登陆的时候发现除了自己的设置的用户就是外来用户,其实Ubuntu中的root帐号默认是被禁用了的,所以登陆的时候没有这个账号,但是如果每次使用root ...
- MapReduce之单词计数
最近在看google那篇经典的MapReduce论文,中文版可以参考孟岩推荐的 mapreduce 中文版 中文翻译 论文中提到,MapReduce的编程模型就是: 计算利用一个输入key/value ...
- android 多布局
做为最后的方法,也是最后一个才会考虑的方法,那就是为不同的尺寸界面单独写布局.不到万不得已不要用这个方法,相信不少人和我一样都被逼着用过这个方法吧.需要说明的是,横竖屏切换使用不同布局也是用这个方法解 ...
- js高仿QQ消息列表左滑功能
该组件,主要功能类似于QQ消息列表左滑出现删除.标为已读等按钮的功能:现在的版本用的是纯javaScript编写:后续会跟进 angularJs 开发的类似组件以及jquery的; 下面,就让我们来认 ...
- SAP Business One SAP B1功能概述
SAP Business One SAP B1功能概述 SAP B One配有易于使用的软件界面,是一款全面的,多功能的业务管理解决方案,贵企业可以将其用作主要的企业资源(ERP)应用程序. 该解决方 ...