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 相关文章推荐
javascript中的self和this用法小结
Feb 08 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 Javascript
浅析JS异步加载进度条
May 05 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
js基础之DOM中document对象的常用属性方法详解
Oct 28 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
详解JavaScript之ES5的继承
Jul 08 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
js实现3D旋转相册
Aug 02 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 如何设置一个严格控制过期时间的session
2017/05/05 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
ThinkPHP5.0框架使用build 自动生成模块操作示例
2019/04/11 PHP
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
Nodejs libuv运行原理详解
2019/08/21 NodeJs
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python类中super() 的使用解析
2019/12/19 Python
flask开启多线程的具体方法
2020/08/02 Python
Pycharm调试程序技巧小结
2020/08/08 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
小学生暑假感言
2014/02/06 职场文书
亲属关系公证书
2014/04/08 职场文书
加强作风建设心得体会
2014/10/22 职场文书
办公用品质量保证书
2015/05/11 职场文书
python中24小时制转换为12小时制的方法
2021/06/18 Python
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
英国数字版游戏销量周榜公布 《小缇娜的奇幻之地》登顶
2022/04/03 其他游戏