新建一個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
<script></script>
{{name}} says: {{message}}
p>
新建一個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();
