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 ...
随机推荐
- Python的Beautiful Soup简单使用
Beautiful Soup是python的一个库,最主要的功能是从网页抓取数据 Beautiful Soup提供一些简单的.python式的函数用来处理导航.搜索.修改分析树等功能 它是一个工具箱, ...
- windows7 安装IIS没有default web site 解决方法
因当时是第一次在Windows 7上使用IIS,不小心把default web site删除了,后来无论怎么重装IIS都不行,最后想到能不能直接把别人安装好后的IIS相关文件夹拷过来使用,用宿舍一哥们 ...
- MTK 强制横屏
frameworks\base\policy\src\com\android\internal\policy\impl目录下的PhoneWindowManager.java的rotationForOr ...
- winform命名规范
我们知道Button 常常简称为btn,那么Winform中的其它控件呢,这篇文章在C#的winform控件命名规范 的基础上对一些控件的名称的简称进行了整理. 1. 标准控件 NO. 控件类型简写 ...
- 给一个由n-1个整数组成的未排序的序列，其元素都是1~n中的不同的整数。如何在线性时间复杂度内寻找序列中缺失的整数
思路分析:尼玛这不就是等差数列么.首先将该n-1个整数相加,得到sum,然后用(1+n)n/2减去sum,得到的差即为缺失的整数.因为1~n一共n个数,n个数的和为(1+n)n/2,而未排序数列的和为 ...
- Weblogic12 集群部署
1. 集群配置规划 服务器名称 地址和端口 AdminServer 192.168.15.1:7001 ManagedServer1 192.168.15.1:8001 ManagedServer2 ...
- Spring JDBC入门
Spring将替我们完成所有使用JDBC API进行开发的单调乏味的.底层细节处理工作. 操作JDBC时Spring可以帮我们做这些事情: 定义数据库连接参数,打开数据库连接,处理异常,关闭数据库连接 ...
- 关于控制台程序下使用mfc库中的函数时断言
例如: TCHAR path[8192]; int len = getmodulefilename(afxgetinstancehandle(),path,8192);//会出现断言 如果没有选择支持 ...
- Cookie和Session机制详解
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- 在MyEclipse（2015）中上传项目到github的步骤（很详细）
(图文)在MyEclipse(2015)中上传项目到github的步骤(很详细) git|smartGit使用详解 SmartGit使用教程