新建一个api.php文件,内容: 复制代码 代码如下: header('Content-Type: application/json; charset=utf-8'); die(json_encode(array('name'=>'tom'))); 新建一个index.html文件。(backbone基于jquery、underscore,我们使用Mustache来做模板解析,当然用其他的haml、jade,或者underscore里面的模板也都是可以) 内容: 复制代码 代码如下: New Document {{name}} says: {{message}} 新建一个custom.js文件,内容: 复制代码 代码如下: // 这是一个管理着 视图/控制/模型 的全局类 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({ url: function() { return '/api.php'; // 获得数据的后台地址。 }, initialize: function() { this.set({'message':'hello world'}); // 前端定义一个message字段,name字段由后端提供。 } }); App.Views.Hello = Backbone.View.extend({ el: $("body"), template: $("#hello-container-template").html(), initialize: function(options){ this.options = options; this.bind('change', this.render); this.model = this.options.model; }, render: function(){ // render方法,目标只有两个:填充this.el,返回this以便链式操作。 $(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) ); return this } }); App.Controllers.Routes = Backbone.Controller.extend({ 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}); helloView.trigger('change'); } }) }}); App.initialize();