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里面的模板也都是可以)

  内容:

  

复制代码 代码如下:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  <HTML>

  <HEAD>

  <TITLE> New Document </TITLE>

  <script type="text/javascript" src="./jquery.min.js"></script>

  <script type="text/javascript" src="./underscore.min.js"></script>

  <script type="text/javascript" src="./backbone.min.js"></script>

  <script type="text/javascript" src="./mustache.min.js"></script>

  <script type="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文件,内容:

  

复制代码 代码如下:

  // 这是一个管理着 视图/控制/模型 的全局类

  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: $("#<span style="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()) );

  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();