前言:javascript
Backbone.js是一款JavaScript MVC应用框架,强制依赖于一个实用型js库underscore.js,非强制依赖于jquery;其主要组件有模型,视图,集合,路由;与后台的交互主要是经过Restful JSON 进行数据传输;java
基础Backbone.js知识:jquery
一、引入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>
二、新建M.V.C:数据结构
Model对象表示数据模型,用于定义数据结构; View用于数据展现,绑定DOM事件和处理页面逻辑, Collection是管理数据模型的集合,用于查找或保存数据;mvc
<script type="text/javascript"> //M 模型 var person = Backbone.Model.extend({ defaults:{ name:'default', age:10, score:100 }, 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',20); //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>
三、导航控制器(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>
四、与服务器交互的模型对象:iview
调用模型对象的save方法是发送POST新建或PUT修改请求;fetch是调用GET方法;destroy方法是使用delete请求方式向服务器发送对象的id,服务器作删除记录操做;ide
模型对象集合提供了fetch和create两个方法与服务器进行交互;create方法与以上save方法相似;fetch