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 id="hello-container-template" type="text/template"></p><p><div>{{name}} says: {{message}} </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應(yīng)用還是企業(yè)網(wǎng)站都用得上，相比React針對View和單向數(shù)據(jù)流的設(shè)計，Backbone更能體現(xiàn)MVC的思路，所以針對它寫一篇入門范例,需要的朋友可以參考下 2017-10-10
-
詳解Backbone.js框架中的模型Model與其集合collection
這篇文章主要介紹了Backbone.js框架中的模型Model與其集合collection,Backbone擁有與傳統(tǒng)MVC框架相類似的Model與View結(jié)構(gòu),需要的朋友可以參考下 2016-05-05
-
關(guān)于backbone url請求中參數(shù)帶有中文存入數(shù)據(jù)庫是亂碼的快速解決辦法
這篇文章主要介紹了關(guān)于backbone url請求中參數(shù)帶有中文存入數(shù)據(jù)庫是亂碼的快速解決辦法的相關(guān)資料,需要的朋友可以參考下 2016-06-06
-
這篇文章主要介紹了輕量級javascript 框架Backbone使用指南的相關(guān)資料,需要的朋友可以參考下 2015-07-07
新建一個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 id="hello-container-template" type="text/template"></p><p><div>{{name}} says: {{message}} </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應(yīng)用還是企業(yè)網(wǎng)站都用得上，相比React針對View和單向數(shù)據(jù)流的設(shè)計，Backbone更能體現(xiàn)MVC的思路，所以針對它寫一篇入門范例,需要的朋友可以參考下2017-10-10
-
詳解Backbone.js框架中的模型Model與其集合collection
這篇文章主要介紹了Backbone.js框架中的模型Model與其集合collection,Backbone擁有與傳統(tǒng)MVC框架相類似的Model與View結(jié)構(gòu),需要的朋友可以參考下2016-05-05 -
關(guān)于backbone url請求中參數(shù)帶有中文存入數(shù)據(jù)庫是亂碼的快速解決辦法
這篇文章主要介紹了關(guān)于backbone url請求中參數(shù)帶有中文存入數(shù)據(jù)庫是亂碼的快速解決辦法的相關(guān)資料,需要的朋友可以參考下2016-06-06 - 這篇文章主要介紹了輕量級javascript 框架Backbone使用指南的相關(guān)資料,需要的朋友可以參考下2015-07-07
BackBone及其實例探究_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了BackBone及其實例探究,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07 
深入解析JavaScript框架Backbone.js中的事件機(jī)制
這篇文章主要介紹了JavaScript框架Backbone.js中的事件機(jī)制,其中涉及到Backbone的MVC結(jié)構(gòu)及內(nèi)存使用方面的很多知識,需要的朋友可以參考下
2016-02-02 
簡單了解Backbone.js的Model模型以及View視圖的源碼
這篇文章主要簡單介紹了Backbone.js的Model模型以及View視圖的源碼,Backbone是一款高人氣JavaScript的MVC框架,需要的朋友可以參考下
2016-02-02 
深入解析Backbone.js框架的依賴庫Underscore.js的作用
這篇文章主要介紹了深入解析Backbone.js框架的依賴庫Underscore.js的作用,用過Node.js的朋友對Underscore一定不會陌生:)需要的朋友可以參考下
2016-05-05 
這篇文章主要介紹了Javascript MVC框架Backbone.js詳解,本文對Backbone.js的各個模塊和方法的使用上都給出了實際例子,需要的朋友可以參考下
2014-09-09