让我们用Backbone.js来写一个HelloWorld程序。

原创 2011年07月02日 22:57:56

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

<script id="hello-container-template" type="text/template">

<div>{{name}} says: {{message}} </div>

</script>

</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: $("#hello-container-template").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();


Backbone入门讲解

原文:http://www.cnblogs.com/chaojidan/p/4207227.html Backbone是一个实现了web前端mvc模式的js框架。 一种解决问题的通用方法,我们叫...
  • Joyhen
  • Joyhen
  • 2015-01-08 18:54:57
  • 8796

backbone与php交互

backbone通过save保存数据到服务器端,通过fetch从服务器端获取数据。两者执行时都会调用sync函数,而不会执行服务器端操作。因此,除非是自定义的sync操作(如采用websocket等非...
  • mochong
  • mochong
  • 2017-03-28 14:14:06
  • 88

Backbone笔记之一(View)

关于Backbone是什么,就不用我多介绍了,不知道的这货是什么的话请直接忽略本文吧。本文只是作为本人学习这货的一个笔记,顺大便给其他学习者参考一下。View首先从View部分开始,第一个程序注定是从...
  • Raptor
  • Raptor
  • 2013-02-02 21:22:12
  • 15743

gulp、MockJs、NodeJs、Mustache脱离后台环境,只通过模拟数据运行项目

项目需求:在node环境下开发的项目,发布后不依靠后台数据,只通过模拟数据能正常运行(做项目demo);[TOC] 用到的主要技术:gulp(构建工具),MockJs(模拟数据),NodeJs(文件...
  • u012612399
  • u012612399
  • 2017-06-24 18:01:34
  • 907

让我们用Backbone.js来写一个HelloWorld程序。

新建一个api.php文件,内容:header(Content-Type: application/json; charset=utf-8);die(json_encode(array(name=>t...
  • soasme
  • soasme
  • 2011-07-02 22:57:56
  • 66050

backbone学习进阶—

早就知道backbone有一些好处,今天开始系统的学习一下backbone了,然后自己在这里贴一些傻逼的不行的代码片段。 代码一 ...
  • ul646691993
  • ul646691993
  • 2015-06-03 23:59:35
  • 853

Backbone.js简单入门范例

原文地址:http://dmyz.org/archives/598 Backbone.js已经很古老了,在Angular.js大行其道的今天,我们公司居然还在用Backbone。。。【哭笑不...
  • u011326979
  • u011326979
  • 2016-07-13 14:22:06
  • 1601

菜鸟功略(怎样运行好一个HelloWorld程序)

菜鸟功略(怎样运行好一个HelloWorld程序) ...
  • stupidwu
  • stupidwu
  • 2006-11-05 04:15:00
  • 714

require.js+backbone 使用r.js 在本地与生产环境 一键压缩的实现方式

本文主要讲 利用r.js压缩,来实现本地不压缩,生产环境压缩 r.js 是运行在node上的,默认使用UglifyJS。UglifyJS真的很好用,那为什么说默认的方式 不是很方便呢? r.js 单独...
  • a324539017
  • a324539017
  • 2014-07-11 17:29:41
  • 2422

前端编程提高之旅(四)----backbone初体验

来到新的实习单位,公司的业务模式、组织架构、开发技术、开发规范对于乐帝这样的职场菜鸟来说都是新的,这一周入职的这几天主要在熟悉公司采用的前端架构,前端架构基本包括:backbone、marionett...
  • yingyiledi
  • yingyiledi
  • 2014-08-30 22:06:02
  • 4230
收藏助手
不良信息举报
您举报文章:让我们用Backbone.js来写一个HelloWorld程序。
举报原因:
原因补充:

(最多只允许输入30个字)