欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Backbone.js的Hello World程序?qū)嵗?/h1>
 更新時間：2015年06月19日 10:54:29   投稿：junjie  
這篇文章主要介紹了Backbone.js的Hello World程序?qū)嵗?本文給出后端PHP通信、前臺HTML、和Backbone.js 代碼,需要的朋友可以參考下

新建一個api.php文件，內(nèi)容：
 

復(fù)制代碼 代碼如下:

 header('Content-Type: application/json; charset=utf-8');
die(json_encode(array('name'=>'tom')));
 

新建一個index.html文件。(backbone基于jquery、underscore，我們使用Mustache來做模板解析，當(dāng)然用其他的haml、jade，或者underscore里面的模板也都是可以)

內(nèi)容：

復(fù)制代碼 代碼如下:

<!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&nbsp;id="hello-container-template"&nbsp;type="text/template"></p><p><div>{{name}}&nbsp;says:&nbsp;{{message}}&nbsp;</div></p><p></script></p>
 </BODY>
</HTML>

新建一個custom.js文件，內(nèi)容：

復(fù)制代碼 代碼如下:

// 這是一個管理著 視圖/控制/模型 的全局類
var App = {
    Models: {},
Views: {},
Controllers: {},
Collections: {},
initialize: function() {
new App.Controllers.Routes();
        Backbone.history.start() // 要驅(qū)動所有的Backbone程序，Backbone.history.start()是必須的。
    }
};
App.Models.Hello = Backbone.Model.extend({
    url: function() {
        return '/api.php'; // 獲得數(shù)據(jù)的后臺地址。
    },
    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方法，目標(biāo)只有兩個：填充this.el，返回this以便鏈?zhǔn)讲僮鳌?br /> $(this.el).html(Mustache.to_html($(this.el).template,this.model.toJSON()) );
return this
}
});
App.Controllers.Routes = Backbone.Controller.extend({
routes: {
"!/hello" : "hello",//使用#!/hello驅(qū)動路由
},
hello : function() {
//新建一個模型，模型向后端請求更新內(nèi)容成功后根據(jù)模型渲染新頁面
var helloModel = new App.Models.Hello;
helloModel.fetch({
success: function(model){
var helloView = new App.Views.Hello({model: model});
helloView.trigger('change');
}
})
}});
App.initialize();

相關(guān)文章

  • Backbone.js 0.9.2 源碼注釋中文翻譯版

    Backbone.js 0.9.2 源碼注釋中文翻譯版

    Backbone.js為復(fù)雜WEB應(yīng)用程序提供模型(models)、集合(collections)、視圖(views)的結(jié)構(gòu)。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合附有可枚舉函數(shù)的豐富API； 視圖可以聲明事件處理函數(shù)，并通過RESRful JSON接口連接到應(yīng)用程序。
    2015-06-06
  • require、backbone等重構(gòu)手機(jī)圖片查看器

    require、backbone等重構(gòu)手機(jī)圖片查看器

    這篇文章主要為大家詳細(xì)介紹了require、backbone等重構(gòu)手機(jī)圖片查看器的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • Backbone.js框架中Model與Collection的使用實(shí)例

    Backbone.js框架中Model與Collection的使用實(shí)例

    這篇文章主要介紹了Backbone.js框架中Model與Collection的使用實(shí)例,Collection是Model的一個有序的集合,需要的朋友可以參考下
    2016-05-05
  • Backbone.js框架中簡單的View視圖編寫學(xué)習(xí)筆記

    Backbone.js框架中簡單的View視圖編寫學(xué)習(xí)筆記

    這篇文章主要介紹了Backbone.js框架中簡單的View編寫學(xué)習(xí)筆記,Backbone是JavaScript的一款高人氣MVC框架,需要的朋友可以參考下
    2016-02-02

    • 最新評論