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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
详解 vue better-scroll滚动插件排坑
Feb 08 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
js实现通用的微信分享组件示例
2014/03/10 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
微信小程序+腾讯地图开发实现路径规划绘制
2019/05/22 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
最新创业融资计划书
2014/01/19 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
赔偿协议书范本
2014/09/12 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
介绍信样本
2015/01/31 职场文书
综合实践活动报告
2015/02/05 职场文书
酒店人事主管岗位职责
2015/04/11 职场文书
小学教师教学随笔
2015/08/14 职场文书
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python