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 ...
随机推荐
- 【转载】springboot + swagger
注:本文参考自 http://www.jianshu.com/p/0465a2b837d2 https://www.cnblogs.com/java-zhao/p/5348113.html swagg ...
- android应用开发-从设计到实现 3-4 静态原型的状态栏
静态原型的状态栏 状态栏Symbol 状态栏似乎非常复杂,有wifi信号.手机信号.时间.电量等信息,幸好Sketch原生就自带的现成组件,你能够直接拿过来就用了.当然.你也能够自己一个一个去画,只是 ...
- php 自定义 分页函数
<?php /** * 分页函数 * @param type $num 数据总数 * @param type $perpage 每页总数 * @param type $curpage 当前分页 ...
- Nginx（五）-- 配置文件之Rewrite
Rewrite支持URL重写 1.常用指令以及语法 1) if指令 if语法: if 空格 (condition) {} 条件: 1. “=” 来判断相等,用于字符的比较 ...
- Java调用MQ队列
IBM MQ 6.0中设置两个队列,(远程队列.通道之类都不设置). 队列管理器是XIR_QM_1502 队列名称是ESBREQ IP地址是10.23.117.134(远程的一台电脑,跟我的电脑不在一 ...
- Python中字符串的intern机制
intern机制: 字符串类型作为Python中最常用的数据类型之一,Python解释器为了提高字符串使用的效率和使用性能,做了很多优化,例如:Python解释器中使用了 intern(字符串驻留)的 ...
- 在MVC中实现和网站不同服务器的批量文件下载以及NPOI下载数据到Excel的简单学习
嘿嘿,我来啦,最近忙啦几天,使用MVC把应该实现的一些功能实现了,说起来做项目,实属感觉蛮好的,即可以学习新的东西,又可以增加自己之前知道的知识的巩固,不得不说是双丰收啊,其实这周来就开始面对下载在挣 ...
- MVC的初步认识理论
说起来写博客可以说一个月没来啦,我们狠狠的放假一个月,想一想都奇怪.而是想一下以后的假期还会这样吗?或许这是作为学生的我们的最后一个长的假期啦,以后就要面对工作再也没有寒假暑假之分啦,在这一个月的时间 ...
- Codeforces Round #363 (Div. 1) B. Fix a Tree 树的拆环
题目链接:http://codeforces.com/problemset/problem/698/B题意:告诉你n个节点当前的父节点,修改最少的点的父节点使之变成一棵有根树.思路:拆环.题解:htt ...
- CSS-禁用a标签
<style> a.disabled { pointer-events: none; filter: alpha(opacity=50); /*IE滤镜,透明度50%*/ -moz-opa ...