Backbone.js的Hello World程序实例
新建一个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里面的模板也都是可以)
内容：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>NewDocument</TITLE>
<scripttype="text/javascript"src="./jquery.min.js"></script>
<scripttype="text/javascript"src="./underscore.min.js"></script>
<scripttype="text/javascript"src="./backbone.min.js"></script>
<scripttype="text/javascript"src="./mustache.min.js"></script>
<scripttype="text/javascript"src="./custom.js"></script>
</HEAD>
<BODY>
<p><script id="hello-container-template" type="text/template"></p><p><div>{{name}} says: {{message}} </div></p><p></script></p>
</BODY>
</HTML>
新建一个custom.js文件，内容：
//这是一个管理着视图/控制/模型的全局类
varApp={
Models:{},
Views:{},
Controllers:{},
Collections:{},
initialize:function(){
newApp.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':'helloworld'});//前端定义一个message字段，name字段由后端提供。
}
});
App.Views.Hello=Backbone.View.extend({
el:$("body"),
template:$("#<spanstyle="font-family:monospace;white-space:pre;">hello-container-template</span>").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()));
returnthis
}
});
App.Controllers.Routes=Backbone.Controller.extend({
routes:{
"!/hello":"hello",//使用#!/hello驱动路由
},
hello:function(){
//新建一个模型，模型向后端请求更新内容成功后根据模型渲染新页面
varhelloModel=newApp.Models.Hello;
helloModel.fetch({
success:function(model){
varhelloView=newApp.Views.Hello({model:model});
helloView.trigger('change');
}
})
}});
App.initialize();