Backbone.js的Hello World程序实例

新建一个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();

赞 (0)

相关推荐

  • backbone简介_动力节点Java学院整理

    简介 Web 应用程序越来越关注于前端,使用客户端脚本与 Ajax 进行交互.由于 JavaScript 应用程序越来越复杂,如果没有合适的工具和模式,那么 JavaScript 代码的高效编写.非重复性和可维护性方面会面临挑战.模型-视图-控制器 (MVC) 是一个常见模式,可用于服务器端开发以生成有组织以及易维护的代码.MVC 支持将数据(比如通常用于 Ajax 交互的 JavaScript Object Notation (JSON) 对象)从表示层或从页面的文档对象模型 (documen

  • Javascript MVC框架Backbone.js详解

    随着JavaScript程序变得越来越复杂,往往需要一个团队协作开发,这时代码的模块化和组织规范就变得异常重要了.MVC模式就是代码组织的经典模式. (--MVC介绍.) (1)Model Model表示数据层,也就是程序需要的数据源,通常使用JSON格式表示. (2)View View表示表现层,也就是用户界面,对于网页来说,就是用户看到的网页HTML代码. (3)Controller Controller表示控制层,用来对原始数据(Model)进行加工,传送到View. 由于网页编程不同于客

  • Backbone.js中的集合详解

    Backbone.js中的集合详解

    Backbone.js的集合只是一个简单的有序集的模型.通过适应模型和集合,我们可以避免数据处理逻辑放到了我们的视图层.此外,模型和集合还提供了便利的与后端一起工作的方法,当数据发生变化时,可以自动化地标记Backbone.js视图.这样,它可以用于如下的情况: 复制代码 代码如下: Model: Animal, Collection: Zoo 通常情况下你的集合只适应一种模型,但模型本身并不局限于集合的类型. 复制代码 代码如下: Model: person, Collection: Offi

  • Backbone.js的一些使用技巧

    自从3年前Backbone.js发布第一版以来,Backbone.js就成为一个流行的开源JavaScript "MV*"框架,并获得人们的青睐.尽管Backbone.js给JavaScript应用提供了框架,但是它仍然给开发者留有很多设计模式供选择,不管怎样,当开发者第一次使用Backbone.js时还会产生很多普遍的问题的. 因此,在这篇文章中,我们将介绍很多不同的设计模式供你在Backbone.js应用中使用,而且我们也会一同来看看对于开发者来说会产生很多普遍的有关性能伸缩的问题

  • 轻量级javascript 框架Backbone使用指南

    轻量级javascript 框架Backbone使用指南

    Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户端和服务器间的数据传输,从而实现了更快加速的Web页面更新. 能心静下来学习了,以前以为Backbone 是一座高山用起来很难,结果只是学了2天就有一些新的,实在让人开心. 我整理了一下整个BackBone的学习记录在我的GIT里面,大部分事件都有例子并且有详细的注解和解释,结合require.js

  • Backbone.js的Hello World程序实例

    新建一个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里面的模板也都是可以) 内容: 复制代码 代码如下: <

  • 基于JS实现的倒计时程序实例

    本文实例讲述了基于JS实现的倒计时程序.分享给大家供大家参考.具体实现方法如下: 剩余时间:<i id="expireTime"></i> <script type="text/javascript"> var expire = 2412169; var expireTime = function(expires){ if(expires > 0){ var second = expires; }else{ var seco

  • Backbone.js框架中Model与Collection的使用实例

    Model 关于backbone,最基础的一个东西就是model,这个东西就像是后端开发中的数据库映射那个model一样,也是数据对象的模型,并且应该是和后端的model有相同的属性(仅是需要通过前端来操作的属性). 下面就从实例来一步一步的带大家来了解backbone的model到底是什么样的一个东西. 首先定义一个html的页面: <!DOCTYPE html> <html> <head> <title>the5fire-backbone-model&l

  • 微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解

    微信小程序引用公共js里的方法的实例详解 一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们该如何实现呢. 在根目录下有一个app.js文件.这个根目录的js 文件我们可以通过getApp()轻松调用. //app.js App({ globaData:'huangenai' }) //test.js var app = getApp(); Pag

  • js如何实现小程序wx.arrayBufferToBase64方法实例

    目录 前言 探索失败的过程 卡壳的arrayBuffer转base64 关键点btoa的实现 修成正果 总结 前言 在小程序开发中,需要将接口请求获得的arrayBuffer数据,转换为base64格式数据,进行图片的显示. 微信小程序提供了wx.arrayBufferToBase64方法,但很不幸,这个方法在基础库版本 2.4.0 起已废弃,已不推荐使用. 虽然目前即使小程序基础库版本为2.22.0,也能正常使用.但是不确定未来哪天,在更新的基础库中,该方法被删除.这样就会带来项目上的隐患.

  • 讲解JavaScript的Backbone.js框架的MVC结构设计理念

    讲解JavaScript的Backbone.js框架的MVC结构设计理念

    什么是Backbone.js? Backbone.js是十大JS框架之首,Backbone.js 是一个重量级js  MVC 应用框架,也是js MVC框架的鼻祖.它通过Models数据模型进行键值绑定及custom事件处理,通过模型集合器Collections提供一套丰富的API用于枚举功能,通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互. 简而言之,Backbone是实现了web前端MVC模式的js库 什么是MVC? MVC:后端服务器首先(过程1)

  • JavaScript的Backbone.js框架的一些使用建议整理

    Backbone 为复杂Javascript应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视图可以声明事件处理函数,并通过RESTful JSON接口连接到应用程序. 当我们开发含有大量Javascript的web应用程序时,首先你需要做的事情之一便是停止向DOM对象附加数据. 通过复杂多变的jQuery选择符和回调函数创建Javascript应用程序,包括在HTML UI,Ja

  • Backbone.js 0.9.2 源码注释中文翻译版

    // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function() { // 创建一个全局对象, 在浏览器中表示为window对象, 在Node.j

随机推荐