Backbone.js应用基础

前言:

  Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery;其主要组件有模型,视图,集合,路由;与后台的交互主要是通过Restful JSON 进行数据传输;

基础Backbone.js知识:

  1、引入js文件:如果依赖于第三方类库如jquery,则最好先引入;之后引入underscore.js 这是必须引入且在引入backbone.js之前,其引入文档结构如下:

<head>
<meta charset="UTF-8">
<title>Backbone</title>
<script src="3rd/jquery1.9.1.min.js"></script>
<script src="3rd/underscore.js"></script>
<script src="3rd/backbone.js"></script>
</head>

  2、新建M.V.C:

    Model对象表示数据模型,用于定义数据结构; View用于数据展示,绑定DOM事件和处理页面逻辑, Collection是管理数据模型的集合,用于查找或保存数据;

<script type="text/javascript">
//M 模型
var person = Backbone.Model.extend({
defaults:{
name:'default',
age:,
score:
},
initialize:function(){
this.on('change:age',function(){
var oa = this.previous('age');
var a = this.get('age');
//console.log(a+'==='+oa);
});
},
myFun: function(){
//自定义事件
console.log(this.get('score'));
console.log(this.get('name'));
console.log(this.get('age'));
}
}); var man = new person();
man.set('age',);
//man.myFun();
//console.log(man.attributes['score']);
//C 集合
var persons = [{},{}]
var people = new Backbone.Collection(persons,{
model:person
}); //V 视图
var diview = Backbone.View.extend({
el:'#backview',
render:function(content){
this.el.innerHTML = content;
}
}); var test = new diview();
test.render('终于见到了.....');
</script>

mvc

  3、导航控制器(router--路由):

<script type="text/javascript">

    var myrouter = Backbone.Router.extend({
routes:{
'':'defaut',
'list':'list'
'show/:name','show'
},
defaut:function(){ },
list:function(){ },
show:function(name){ }
});
var t_router = new myrouter();
Backbone.history.start(); </script>

  4、与服务器交互的模型对象:

   调用模型对象的save方法是发送POST新建或PUT修改请求;fetch是调用GET方法;destroy方法是使用delete请求方式向服务器发送对象的id,服务器做删除记录操作;

   模型对象集合提供了fetch和create两个方法与服务器进行交互;create方法与以上save方法类似;

  

   

上一篇:php面试题之三——PHP语言基础(基础部分)


下一篇:String使用拼接对性能的影响和原因。