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 ...
随机推荐
- Java进阶面试题列表
面向对象编程的基本理念与核心设计思想 解释下多态性(polymorphism),封装性(encapsulation),内聚(cohesion)以及耦合(coupling). 继承(Inheritanc ...
- ubuntu14下搭建svn
1.安装 查看是否安装 svn help 安装了卸载 sudo apt-get remove --purge subversion 安装 sudo apt-get update sudo apt-ge ...
- Android 应用授权访问GooleDrive
Refer:https://developers.google.com/drive/auth/android Go to the Google Cloud Console. Select a pr ...
- go interface介绍
http://legendtkl.com/2017/06/12/understanding-golang-interface/ 深入理解 Go Interface http://legend ...
- pytesseract 报windows err no2的错误
需要把源安装文件pytesseract.py的修改为,tesseract_cmd = 'C:/Program Files (x86)/Tesseract-OCR/tesseract.exe' 原始是t ...
- 多线程 TCP 连接
TCP的Java支持 协议相当于相互通信的程序间达成的一种约定,它规定了分组报文的结构.交换方式.包含的意义以及怎样对报文所包含的信息进行解析,TCP/IP协议族有IP协议.TCP协议和UDP协议.现 ...
- Win10 我的电脑 -- 右键点击管理打不开
右键点击我的电脑 -- 管理,出现如下错误,这是删除快捷方式小箭头导致的 解决方法: win+R 输入 regedit,分别在 HKEY_CLASSES_ROOT\piffile HKEY_CLASS ...
- 利用Squid反向代理搭建CDN缓存服务器加快Web访问速度
2011年11月26日 ? Web服务器架构 ? 评论数 2 案例:Web服务器:域名www.abc.com IP:192.168.21.129 电信单线路接入访问用户:电信宽带用户.移动宽带用户出现 ...
- flask livereload用法
#coding=utf-8 from flask import Flask from flask_script import Manager app = Flask(__name__) manager ...
- sqlserver连接问题收集
问题1. 使用navicat连接本地sqlserver,报错“命名管道提供程序无法打开与 sql server 的连接 [2]” 解决: 参考本篇文章 <持续收集中>