Backbone.js应用基础
Posted 凉城
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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: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>
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方法类似；
以上是关于Backbone.js应用基础的主要内容，如果未能解决你的问题，请参考以下文章