Backbone.js的Hello World程序实例
更新时间：2015年06月19日 10:54:29 投稿：junjie
这篇文章主要介绍了Backbone.js的Hello World程序实例,本文给出后端PHP通信、前台HTML、和Backbone.js 代码,需要的朋友可以参考下
新建一个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();
相关文章
这篇文章主要介绍了Backbone.js框架中简单的View编写学习笔记,Backbone是JavaScript的一款高人气MVC框架,需要的朋友可以参考下2016-02-02
全面解析JavaScript的Backbone.js框架中的Router路由
这篇文章主要介绍了Backbone.js框架中的Router路由功能,Router在Backbone中相当于一个MVC框架中的Controller控制器功能,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了BackBone及其实例探究,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
这篇文章主要介绍了轻量级javascript 框架Backbone使用指南的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了Javascript MVC框架Backbone.js详解,本文对Backbone.js的各个模块和方法的使用上都给出了实际例子,需要的朋友可以参考下2014-09-09
实例讲解JavaScript的Backbone.js框架中的View视图
这篇文章主要介绍了实例讲解JavaScript的Backbone.js框架中的View视图,在浏览器端js框架backbone中我们用view来绑定和处理DOM事件,需要的朋友可以参考下2016-05-05
深入解析Backbone.js框架的依赖库Underscore.js的作用
这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下2016-05-05
讲解JavaScript的Backbone.js框架的MVC结构设计理念
这篇文章主要介绍了JavaScript的Backbone.js框架的MVC结构设计理念,相比较于Angular.js,同样为MVC结构的Backbone则显得轻巧许多,需要的朋友可以参考下2016-02-02
这篇文章主要介绍了backbone简介，详细的介绍了backbone简介和用法，有兴趣的可以了解一下2017-07-07
Backbone.js框架中Model与Collection的使用实例
这篇文章主要介绍了Backbone.js框架中Model与Collection的使用实例,Collection是Model的一个有序的集合,需要的朋友可以参考下2016-05-05
最新评论