backBone.js之Model篇 (1) 简单实例
“Model是js应用的核心，包括基础的数据以及围绕着这些数据的逻辑：数据转换、验证、属性计算和访问控制”。
一、初始化方法
我们先来看一个demo，initialize，这是一个初始化方法，但是写这段代码之前，首先要在<head>元素中导入3个相应的库文件，即jQuery框架、Backbone主框架和依赖库Underscore。需要注意它们导入页面的顺序，由于代码是按照自上而下的顺序进行执行的，因此先导入jQuery框架文件；Backbone依赖于Underscore库，因此在导入Underscore库文件后，才导入Backbone主框架文件。
比如说：
<!DOCTYPE html>
<html>
<head>
<title>daomul for Axiba</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script> (function($){
//Backbone通过extend来扩展实例方法和静态方法：
//initialize这个初始化方法，也称构造函数。这个函数会在Model被实例化时调用。
var People = Backbone.Model.extend({
initialize:function(){
alert('hi , i am daomul!');
}
});
var person = new People;
})(jQuery); </script>
</body>
</html>
二、defaults 和 对象赋值方法get 和 set
属性在一个Model是以字典（或者类似字典）的方式存在的，设定默认值的方式，只不过是实现了Backbone的defaults这个方法，或者是给defaults进行了赋值。
(function($){
var People = Backbone.Model.extend({
initialize : function(){
alert('come on !');
},
defaults:{
name : ' daomul ',
age : ' 24 '
}
});
var person = new People;
//get获取对象的值
alert(person.get('age'));
//set改变对象的值
person.set({phone:'134133',sex:'男'});
alert(person.get('sex'));
})(jQuery);
三、对象中的自定义方法
模型中的自定义方法，可以发现是通过字典的方式来构造的，方法的调用也是可以通过.语法来操作的。
(function($){
var People = Backbone.Model.extend({
initialize: function(){
},
defaults:{
country : 'China'
},
myPrivateMethod : function(){
return 'I \'m from ' + this.get('country') + ' and my name \'s ' + this.get('name');
}
});
var person = new People;
person.set({name : 'Axiba'});
alert(person.myPrivateMethod());
})(jQuery);
四、绑定监听对象中属性的变化
通过this.bind绑定监听对象中属性值的变化，改变是通过change:name，也是字典的格式来定义的。
(function($){
var People = Backbone.Model.extend({
initialize:function(){
alert('1');
//绑定监听
this.bind('change:name',function(){
var name = this.get('name');
alert('oh ,no u change my name to ' + name);
});
},
defaults : {
name : 'Axiba',
age : '100'
}
});
var person = new People;
person.set({name : 'Axiba2'});
})(jQuery);
五、验证规则以及错误的提示
通过下面的demo可以看出有三种方式可以触发值改变的验证：
(function($){
var People = Backbone.Model.extend({
initialize:function(){
this.bind("invalid",function(model,error){
alert(error);
});
},
defaults:{
name : 'Axiba',
age : 11
},
validate:function(attributes){
if(attributes.name == '') {
return "name不能为空！";
}
}
});
var person = new People;
//方法1 ：默认set时不进行验证，save时触发验证。根据验证规则，弹出错误提示。
//person.set({name : ''});
//person.save();
//方法2 ：手动触发验证, set时会触发
//person.set({name:''}, {'validate':true});
//方法3 ：添加错误处理也行
person.on('invalid', function(model, error){
alert(error);
});
person.set({name : ''});
person.save();
})(jQuery);*/
backBone.js之Model篇 (1) 简单实例的更多相关文章
- Backbone.js之model篇(一)
Backbone.js之model篇(一) Backbone 是一个前端 JS 代码 MVC 框架,它不可取代 Jquery,不可取代现有的 template 库.而是和这些结合起来构建复杂的 web ...
- backbone.js之Model篇 简单总结和深入(2)
一.模型属性的一些操作方法 1.mmodel.get() 获取属性的值 2.mmodel.set('age',5) 更新单个属性的值 mmodel.set({name:'aaa',age:6}) ...
- Backbone之旅——Model篇
Backbone作为前端的MVC框架,把后端的设计思想带到前端,使前端代码更加清晰.可维护性大大提高 Backbone依赖于underscore.js和jquery,所以在使用backbone的时候一 ...
- [Backbone.js]如何处理Model里面嵌入的Collection?
写了近半个月的backbone.js代码,从一开始的todo到现在做仿微信的网页聊天,其中最大的困惑就在于如何处理比较复杂的Model,其内嵌了一个或者多个Collections. 假设我们有一个Pe ...
- Backbone学习笔记 - Model篇
2 Model 在Backbone中,Model用于存储核心数据,可以将数据交互相关的逻辑代码放在这里.基本形式如下: var Human = Backbone.Model.extend({ init ...
- IoC容器Autofac正篇之简单实例
先上一段代码. namespace ConsoleApplication3 { class Program { static void Main(string[] args) { ContainerB ...
- IoC容器Autofac正篇之简单实例（四）
先上一段代码. namespace ConsoleApplication3 { class Program { static void Main(string[] args) { ContainerB ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- Backbone.js 中使用 Model
前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了.现在来学习怎么创建自己的 Model 类,并简单的使用.Backbone.js ...
随机推荐
- Eclipse中项目全部报错----项目全部打红叉的解决办法
今天遇到一个超级郁闷的事情,Eclipse新建的项目全部都打有红叉,我起初以为自 己可能是因为这两天一直在配置NDK开发环境方面的东西,是不是一不小心把那个地方给配置了,然后新建项目时项目都会出现红叉 ...
- android LinearLayout添加分隔线
方法一: 可以放置一个ImageView组件,然后将其设为分隔线的颜色或图形. 分隔线View的定义代码如下: [html] view plaincopy <ImageView androi ...
- java学习之maven
maven是项目构建工具,能把项目抽象成POM(Project Object Model) Maven使用POM对项目进行构建.打包.文档化等操作 解决了项目需要类库的依赖管理,简化了项目开发环境搭建 ...
- 如何在LINUX中安装VM-Tools
1.运行VM,启动你的虚拟LINUX系统. 2.切换到原系统,选择VM中的VM菜单----Install VMWare Tools. 3.在虚拟机设置里,请把你的VM-Tools的ISO文件映射到你的 ...
- 使用jquery操作session
摘要: 今天分享的是使用jquery来处理session.我们将使用sessionStorage对象,它类似与localStorage对象,只是sessionStorage是用来储存session数据 ...
- [scala] scala 集合(⑧)
1.List 基础操作 2.Set 基础操作 3. TreeSet 排序Set 4. 拉链操作 5. 流 import scala.collection.immutable.TreeSet impor ...
- JavaWeb学习总结（十五）Jsp中提交的表单的get和post的两种方式
两者的比较: Get方式: 将请求的参数名和值转换成字符串,并附加在原来的URL之后,不安全 传输的数据量较小,一般不能大于2KB: post方式: 数量较大: 请求的参数和值放在HTML的请求头中, ...
- TCPdump指定时间或者指定大小进行循环抓取报文
背景:我们用tcpdump工具循环抓取网卡上的报文,我们会遇到如下情况: 1. 抓取报文后隔指定的时间保存一次: 2. 抓取报文后达到指定的大小保存一次: 本文就这两种情况给出tcpdump的使用方法 ...
- 微信公众号access_token的获取与存储
如果是一个用户触发,那么只要将access_token放在数据库,文件,nosql就行,取时判断时间是否过期,过期重新去微信获取再放入. 如果是很多用户,多进程并发,特别是分布式那种架构呢?进程A判断 ...
- 关于VC中的附加进程调试
今天领导要求在服务端添加一个获取会议参数的功能接口,接口写好后要自己测试,但是没有客户端的源码,只有客户端安装程序和客户端与服务端发送信令的底层库KSYSClient.dll,而我修改了客户端需要底层 ...