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 ...
随机推荐
- webGL 光照
1.着色(shading) 在三维图形学术语“着色”的真正含义就是,根据光照条件重建“物体各表面明暗不一的效果”的过程.明白着色过程,需要考虑两件事: 1.发出光线的光源类型. 2.物体表 ...
- Base64编码——学习笔记
Base64是一种编码方式. 非加密 chcp->936 编码流程: 位数不够后面补0,例中补了2个0. 末尾加=表示结束符. GB2312,有些敏感词不能显示. GBK,是GB2312升级版. ...
- 【转】细谈Redis和Memcached的区别
Redis的作者Salvatore Sanfilippo曾经对这两种基于内存的数据存储系统进行过比较: Redis支持服务器端的数据操作:Redis相比Memcached来说,拥有更多的数据结构和并支 ...
- 更好的使用JAVA线程池
这篇文章分别从线程池大小参数的设置.工作线程的创建.空闲线程的回收.阻塞队列的使用.任务拒绝策略.线程池Hook等方面来了解线程池的使用,其中涉及到一些细节包括不同参数.不同队列.不同拒绝策略的选择. ...
- MapWinGIS------下载与安装
最新版本下载地址: https://github.com/MapWindow/MapWinGIS/releases 1.下载后按步骤安装即可 2.右键以管理员身份运行cmd,运行:regsvr32 C ...
- linux定时任务cron配置[转]
实现linux定时任务有:cron.anacron.at等,这里主要介绍cron服务. 名词解释: cron是服务名称,crond是后台进程,crontab则是定制好的计划任务表. 软件包安装: 要使 ...
- 解决ora-01034和ora-27101错误
使用plsql登录oracle数据库,提示如下错误: 定位原因:tnsnames.ora文件中数据库的配置参数有误所致 解决办法:将SERVICE_NAME修改为SID即可
- Linux 查看目录大小及文件数量命令
查看当前目录大小: [root@21andy.com]# du -sh 查看指定目录大小: [root@21andy.com]# du -sh /www/21andy.com 查看当前目录文件总数: ...
- SaltStack salt-run 命令
salt-run 常见用法如下: salt-run manage.up # 查看在线的minion salt-run manage.down # 查看不在线的minion salt-run manag ...
- osgearth cache
<map name="readymap.org" type="geocentric"> <options> <!--Specify ...