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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
Jan 20 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 Javascript
js实现漂亮的星空背景
Nov 01 Javascript
vue 解除鼠标的监听事件的方法
Nov 13 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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
无需重新编译php加入ftp扩展的解决方法
2013/02/07 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
JS创建自定义表格具体实现
2014/02/11 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
vue车牌号校验和银行校验实战
2019/01/23 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
python批量处理文件或文件夹
2020/07/28 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
岗位职责的构建方法
2014/02/01 职场文书
总经理司机岗位职责
2014/02/06 职场文书
学习标兵获奖感言
2014/02/20 职场文书
工程承包协议书
2014/04/22 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
升学宴祝酒词
2015/08/11 职场文书
使用 JavaScript 制作页面效果
2021/04/21 Javascript
Pandas数据类型之category的用法
2021/06/28 Python
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS