基于underscore、非强制性依赖jquery/zepto的前端javascript框架。
backbone.js是一款web前端开发的javascript轻量级MVC框架;依托此框架,我们可以像高级语言一样定义类、类属性及方法,更好的组织代码并按框架提供的数据逻辑分离方法减少代码混乱。
本文需要的文件:
需要下载这3个js文件:[zepto](http://files.cnblogs.com/files/johnl/zepto.min.js)(jquery的替代品,你可以把它理解为jquery的mini版)、[underscore](http://files.cnblogs.com/files/johnl/underscore.min.js)、[backbone](http://files.cnblogs.com/files/johnl/backbone.min.js)
<script src="js/zepto.min.js"></script>
<script src="js/underscore.min.js"></script>
<script src="js/backbone.min.js"></script>
backbone的4大模块:
模型:Backbone.Model,一个数据模型
集合:Backbone.Collection,数据模型的一个集合
视图:Backbone.View,数据处理,注意它并非我们传统认知中的页面模版
路由:Backbone.Router,路由配置
模型:
这是一个标准的对象模型(数据假定为网站最常见的用户),initialize为初始化方法,默认执行定义的函数或监听必要的事件;defaults为初始化参数,定义的参数将作为对象模型的默认参数。
var User = Backbone.Model.extend({
initialize : function(){
},
defaults : {
name : '大白兔'
lang : '汉语'
}
});
实例化对象模型User,并获得对象属性attributes,输出的数据结构为:Object {name: “大白兔”, lang: “汉语”}
var user = new User;
console.log(user.attributes);
调用set方法设置对象模型指定属性、get方法可以获得对象模型指定属性值
var user = new User;
user.set({name : '小白兔'});
console.log(user.get('name'));
初始化方法initialize中监听属性变化事件change并在回调中自定义属性变化的信息提示
var User = Backbone.Model.extend({
initialize : function(){
this.bind('change:name', function(){
console.log(this.attributes);
});
},
defaults : {
name : '大白兔',
lang : '汉语'
},
});
var user = new User;
user.set({name : ''});
调用save方法提交对象模型数据、设置数据提交地址url
var User = Backbone.Model.extend({
url : '/'
});
var user = new User;
user.save();
既然准备提交对象模型数据了,数据验证方法validate中自定义数据校检方法、初始化方法initialize中监听提交失败事件error并在回调中自定义返回错误的信息提示;一个关于模型的完整demo
var User = Backbone.Model.extend({
url : '/',
initialize : function(){
this.bind('change:name', function(){
console.log(this.attributes);
});
this.bind('error', function(){
console.log('数据提交失败');
});
},
defaults : {
name : '大白兔',
lang : '汉语'
},
validate : function(obj){
if(obj.name.length < 2) console.log('昵称过短');
}
});
var user = new User;
user.set({name : ''});
user.save();
集合:
现在我们要把实例化对象模型的数据存放在实例化对象集合中,就需用到集合了,这里有点绕,楼主在这里绕了很久;可以理解为通过改变集合Users的属性model的值为模型User,从而指定了与集合Users相关联的模型,这里的模型是User
var User = Backbone.Model.extend({
initialize : function(){
},
defaults : {
name : '',
lang : ''
}
});
var Users = Backbone.Collection.extend({
model : User
});
实例化对象集合,并为对象集合添加add一组需按模型模式实例化的指定数据,然后打印对象集合内所有模型数据
var users = new Users;
var arr = [['大白兔', '汉语'], ['贝克汉姆', '英语'], ['齐达内', '法语']];
for(var i = 0; i < arr.length; i ++){
var user = new User({
name : arr[i][0],
lang : arr[i][1]
});
users.add(user);
};
users.each(function(obj){
console.log(obj.attributes);
});
初始化方法initialize中监听数据添加事件add并在回调中自定义数据添加后的信息提示
var Users = Backbone.Collection.extend({
initialize : function(){
this.bind('add', function(obj){
console.log('add', obj.attributes);
});
},
model : User
});
既然是数据,就有添删改;有了添加事件,对应的对象数据删除事件remove、对象数据改变事件change;一个关于集合的完整demo
var User = Backbone.Model.extend({
initialize : function(){
},
defaults : {
name : '',
lang : ''
}
});
var Users = Backbone.Collection.extend({
initialize : function(){
this.bind('add', function(obj){
console.log('add', obj.attributes);
});
this.bind('remove', function(obj){
console.log('remove', obj.attributes);
});
this.bind('change', function(obj){
console.log('change', obj.attributes);
});
},
model : User
});
var users = new Users;
var arr = [['大白兔', '汉语'], ['贝克汉姆', '英语'], ['齐达内', '法语']];
for(var i = 0; i < arr.length; i ++){
var user = new User({
name : arr[i][0],
lang : arr[i][1]
});
users.add(user);
};
user.set({
name : '卡恩',
lang : '德语'
});
users.remove(user);
视图:
本想把视图也一起写完,但是发现视图必须有相对应模型,于是视图模型的合作才是重点,虽然楼主也做好了例子但还不甚了了,待成熟后再专门说免得误人误己,只留一个demo
underscore为我们提供了模板引擎,书写格式如下所示,类似于jquery tmpl
<ul class="user"></ul>
<script id="user_tmpl" type="text/template">
<li><p><%=name %></p><div><%=lang %></div></li>
</script>
然后是javascript部分,这部分还没思索透具体理解暂不写
var User = Backbone.Model.extend({
defaults : {
name : '',
lang : ''
}
});
var Users = Backbone.Collection.extend({
model : User
});
var users = new Users;
var Userv = Backbone.View.extend({
initialize : function(){
_.bindAll(this, 'render');
users.bind('add', this.render);
},
el : '.user',
template : _.template($('#user_tmpl').html()),
render : function(){
$(this.el).append(this.template(this.model.toJSON()));
return this;
}
});
var arr = [['大白兔', '汉语'], ['贝克汉姆', '英语'], ['齐达内', '法语']];
for(var i = 0; i < arr.length; i ++){
var user = new User({
name : arr[i][0],
lang : arr[i][1]
});
users.add(user);
new Userv({
model : user
});
};
同php交互方式:
$data = json_decode(file_get_contents('php://input'));
die(json_encode($data));