关于backbone.js的优缺点，这里就不详谈了，网上关于这方面的讨论很多了，而且各种框架之所以长久生存，通常都是有其特定优势和擅长点的。
使用backbone.js作为前端框架的应用通常都是html和javascript分离的，也可参考requirejs的结构。
本文介绍backbone.js的入门教程，通过本篇，读者应该能够比官方API更快和更好的理解基于backbone.js的应用。
首先，定义一个html宿主页面：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>backbone js test</title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jsrender.js"></script> <script type="text/javascript" src="underscore.js"></script> <script type="text/javascript" src="backbone.js"></script> <script type="text/javascript" src="backbone_getting_start.js"></script> </head> <body> <a href="#!/hello">测试route</a> <div id="result"></div> <script type="text/x-jsrender" id="hello-container-template"> <h3>{{:name}},{{:message}}</h3> <div id="btnClick">测试backbone单击事件</div> </script> </body> </html>
其次，在专门的backbone_getting_start.js文件中定义MVC结构，如下：
/** * Created by dell on 2016/11/20. */ var App = { Models: {}, Views: {}, Controllers: {}, Collections: {}, initialize: function() { new App.Controllers.Routes(); Backbone.history.start(); // 要驱动所有的Backbone程序，Backbone.history.start()是必须的。 } }; App.Models.Hello = Backbone.Model.extend({ urlRoot: function() { return '/webend/api.json'; // 获得数据的后台地址，可以是函数或者属性, 随意定义一个api.json即可，见下文 }, initialize: function() { this.set({'message':'hello world'}); // 前端定义一个message字段，name字段由后端提供, 后台如果包含同样字段，会自动覆盖，否则合并。 } }); App.Views.Hello = Backbone.View.extend({ el: "#result", //定义结果view的容器，只要DOM元素（# . element）都可以，一般使用class或者id template: function() { return $.templates("#hello-container-template"); // 返回template，需要是函数 }, events: { "click #btnClick": "btnClick" // 定义this.el内DOM的事件 }, initialize: function(options){ this.options = options; this.bind('change', this.render); this.model = this.options.model; }, render: function(){ // render方法，目标只有两个：填充this.$el，返回this以便链式操作。如果是this.el，则需要el.innerHtml this.$el.html(this.template().render(this.model)); return this; }, btnClick: function() { alert("测试backbone js events功能！"); } }); App.Controllers.Routes = Backbone.Router.extend({ //早期的版本使用Controller,当前版本已经去掉了Controller routes: { "!/hello" : "hello",//使用#!/hello驱动路由 }, hello : function() { //新建一个模型，模型向后端请求更新内容成功后根据模型渲染新页面 var helloModel = new App.Models.Hello(); helloModel.fetch({ success: function(model){ var helloView = new App.Views.Hello({model: model.toJSON()}); //model需要调用toJSON，否则返回值放置在model.attribute helloView.trigger('change'); } }) }}); App.initialize();
定义后台服务，以返回json的静态文件为例
{"name":"from backend restful api","message":"return from restful api too"}
打开backbone_getting_start.html
点击上述链接，如下：
点击"测试backbone单击事件"，如下：
