标签：
伴随着web端开发技术技术的飞速发展，各种SPA(Single Page Application)层出不穷，web前端的需求越来越多，我们不再是简单的使用jquery来完成绑定数据、交互特效。因此各种MVC、MVP、MVVM等前端框架层出不穷，从今天开始，我会向大家介绍一款前端MVC框架--Backbone.js。
本教程会着重介绍backbone中的一些常用方法和在项目中的实际应用，首先介绍一些backbone开发的配置。
Backbone依赖于underscore引擎，所以在使用backbone的时候我们首先要取得对underscore的引用，其代码层次如下：
整体上来说，Backbone是一个web端javascript的MVC框架，算是轻量级的框架。它能让你像写Java（后端）代码组织js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。
不同于后端C#中的MVC(模型层、视图层、控制层)，Backbone中的MVC概念主要指的是模型层(model)、视图层(view)和集合层(collection)，我们在模型层完成模型属性的建立及校验；在视图层完成事件绑定和模型属性的set和get；当然backbone也有路由router的概念，路由主要控制不同在同一页面不同view的展示。
下面我们通过一个简单的hello world展示backbone的实例：
如上图，初次加载时，页面会显示hello world，当然，我们在文本框中输入文字并提交时，文本框中的文字会自动替换hello world。
1 var AppView = Backbone.View.extend({ 2 el:$(‘body‘), 3 templates:{ 4 "Tem":_.template($(‘#template‘).html()) 5 }, 6 initialize:function(){ 7 var _this=this; 8 $(‘.text‘).html(_this.templates.Tem({data:"Hello World"})); 9 }, 10 events:{ 11 "click input[type=‘button‘]":"AddContent" 12 }, 13 AddContent:function(){ 14 var _this=this; 15 var text=$("input[type=‘text‘]").val(); 16 $(‘.text‘).html(_this.templates.Tem({data:text})); 17 } 18 }); 19 var appview=new AppView();
完整的demo代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="text"> 9 <input type="button" value="按钮"> 10 <h2 class="text"></h2> 11 <script type="text/template" id="template"> 12 <span><%=data%></span> 13 </script> 14 <script type="text/javascript" src="js/jquery.js"></script> 15 <script type="text/javascript" src="js/underscore.js"></script> 16 <script type="text/javascript" src="js/backbone.js"></script> 17 </body> 18 </html> 19 <script type="text/javascript"> 20 var AppView = Backbone.View.extend({ 21 el:$(‘body‘), 22 templates:{ 23 "Tem":_.template($(‘#template‘).html()) 24 }, 25 initialize:function(){ 26 var _this=this; 27 $(‘.text‘).html(_this.templates.Tem({data:"Hello World"})); 28 }, 29 events:{ 30 "click input[type=‘button‘]":"AddContent" 31 }, 32 AddContent:function(){ 33 var _this=this; 34 var text=$("input[type=‘text‘]").val(); 35 $(‘.text‘).html(_this.templates.Tem({data:text})); 36 } 37 }); 38 var appview=new AppView(); 39 </script>
移动前端开发中的Backbone之前言：Backbone简介
标签：
原文地址：http://www.cnblogs.com/zhenghao1987/p/4837515.html
