Backbone.js的Hello World程序实例


Posted in Javascript onJune 19, 2015

新建一个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();
Javascript 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
asp javascript 实现关闭窗口时保存数据的办法
Nov 24 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
this和执行上下文实现代码
Jul 01 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
javascript相关事件的几个概念
May 21 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
搭建vscode+vue环境的详细教程
Aug 31 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 #Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 #Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 #Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 #Javascript
详细解读AngularJS中的表单验证编程
Jun 19 #Javascript
JavaScript中模拟实现jsonp
Jun 19 #Javascript
基于jQuery+Cookie实现的防止刷新的在线考试倒计时
Jun 19 #Javascript
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
js简单实现Select互换数据的方法
2015/08/17 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
用python实现刷点击率的示例代码
2019/02/21 Python
基于python实现百度翻译功能
2019/05/09 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
加工操作管理制度
2014/01/19 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
安全标准化实施方案
2014/02/20 职场文书
初三学习决心书
2014/03/11 职场文书
开展批评与自我批评发言稿
2014/10/16 职场文书
公司奖励通知
2015/04/21 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
Win10 最新稳定版本 21H2开始推送
2022/04/19 数码科技