编写Backbone.js的第一个应用,相当于Hello World!

因为最近都在看《JavaScript快速全栈开发》,所以有些源代码可能就是从中摘抄下来的哦~

这是编写的第一个Backbone.js应用,感觉网络上这方面有些少,作为小白,在此写下自己在书籍和网络上查找出的步骤归纳一下,以便以后的学习和大家的分享交流。

具体步骤:

(1)下载以下库文件,并且引入进等会新建的html文件里面:(具体版本没有深入考虑过,我下载的是jquery-2.0.0、underscore-1.8.3、backbone-1.3.3)

   JQuery:http://www.jq22.com/jquery-info122

Underscore.js:http://www.oschina.net/p/underscore_js/?fromerr=TWMobQ2j

Backbone.js:http://www.oschina.net/p/backbone/?fromerr=Zha8WAhT

(2)再在新建的html里面新建一个<script/>标签添加一段Backbone.js Router。

 <script>
		var app;
		 //定义一个叫firstbackbone的路由。
		 /*
		   用通俗的说法就是新建了一个类,并且继承自Backbone.Router,
		   但javascript并不存在实际意义上的类,仅仅只是通过某些技巧达到类的效果
		 */
		var router = Backbone.Router.extend({
		  routes: {
			'': 'firstbackbone'
		  },
		  //初始化对象时执行,现在暂时没用
		  initialize: function(){
		  },
		  //与上面创建的名字保存一致
		  //添加创建和渲染 View 的逻辑。View()传给View、render()传给render()
		  firstbackbone: function(){
			this.homeView = new homeView;
			this.homeView.render();
		  }
		});
		var homeView = Backbone.View.extend({
		  //el是从视图的tagName、className或者id等属性中创建的元素,没有这些值el就是空div
		  //el 是一个保存 jQuery 选择器的字符串,也可以使用'.'作为类和'#'作为ID名
		  el: 'body',
		  //template属性被赋值给传入值的Underscore.js 函数template 运行的结果
		  template: _.template('Hello First Bockbone.js'),
		  //视图需要重绘便会调render方法
		  render: function(){
			this.$el.html(this.template({}));
		  }
		});
		//调用了 Backbone.history.start 方法,这个方法可以让我们在点击后退或者前进的时候同样会触发路由的事件
		$(document).ready(function(){
		  //实例化Router
		  app = new router;
		  // 打开 Backbone 的历史记录
		  Backbone.history.start();      
		})
 </script>

(3)最后在body里面定义一个空的<div/>,运行html文件即可

 具体效果是在网页中输出Hello First Bockbone.js

(4)源代码免费提供给大家,希望大家一起交流学习。感谢。http://download.csdn.net/detail/miss_ll/9698695


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。, 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,然后着手构建3个示例应用程序;此外,backbone和grunt-bbb、jquery mobile等开发工具的配合使用,以及jasmine、qunit和sinonjs等测试解决方案。, 本书的作者是知名的javascript专家、谷歌chrome团队的工程师addy osmani。本书适合于javascript程序员、web开发人员,尤其是想要学习和使用backbone.js的读者阅读参考。, 如果你想使用单页应用程序(spa)模型创建前端站点,本书向你展示了如何使用backbone.js完成这类工作。你将学会使用backbone自有风格的模型-视图-控制器(mvc)架构,来创建结构化的javascript应用程序。, 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。本书的作者是谷歌chrome团队的工程师addy osmani,他还演示了框架的高级应用。, 《backbone.js应用程序开发》包括以下内容:, 了解backbone.js如何给客户端带来mvc方面的好处;, 编写易于阅读的、结构化的和易扩展代码 ;, 使用backbone.marionette和thorax扩展框架;, 解决使用backbone.js时会遇到的常见问题;, 使用amd和requirejs将代码进行模块化组织;, 使用backbone.paginator插件为collections数据分页;, 使用样板代码引导新的backbone.js应用程序;, 使用jquery mobile,并解决两者之间的路由问题;, 使用jasmine、qunit和sinonjs对backbone应用进行单元测试。
---------------- backbone开发经典 336页清晰完整版pdf-------------- 内容简介 · · · · · · backbone.js提供了一套web开发的框架,为复杂javascript应用程序提供一个mvc结构。 《backbone.js应用程序开发》详细介绍了如何使用backbone.js完成web应用开发。全书从了解mvc、spa和backbone.js的基本知识开始,然后着手构建3个示例应用程序;此外,backbone和grunt-bbb、jquery mobile等开发工具的配合使用,以及jasmine、qunit和sinonjs等测试解决方案。 本书的作者是知名的javascript专家、谷歌chrome团队的工程师addy osmani。本书适合于javascript程序员、web开发人员,尤其是想要学习和使用backbone.js的读者阅读参考。 如果你想使用单页应用程序(spa)模型创建前端站点,本书向你展示了如何使用backbone.js完成这类工作。你将学会使用backbone自有风格的模型-视图-控制器(mvc)架构,来创建结构化的javascript应用程序。 《backbone.js应用程序开发》先从了解mvc、spa和backbone的基本知识开始,然后着手构建示例应用程序——一个简单的todo列表应用程序、restful风格的图书应用程序、以及使用backbone和requirejs的模块化应用程序。本书的作者是谷歌chrome团队的工程师addy osmani,他还演示了框架的高级应用。 《backbone.js应用程序开发》包括以下内容: 了解backbone.js如何给客户端带来mvc方面的好处; 编写易于阅读的、结构化的和易扩展代码 ; 使用backbone.marionette和thorax扩展框架; 解决使用backbone.js时会遇到的常见问题; 使用amd和requirejs将代码进行模块化组织; 使用backbone.paginator插件为collections数据分页; 使用样板代码引导新的backbone.js应用程序; 使用jquery mobile,并解决两者之间的路由问题; 使用jasmine、qunit和sinonjs对backbone应用进行单元测试。 作者简介 · · · · · · Addy Osmani,本书的作者是知名的JavaScript专家、谷歌Chrome团队的工程师,他对JavaScript应用程序架构有着强烈的爱好,还创建了一些比较流行的项目,如TodoMVC,并且对Yeoman、Modernizr和jQuery等其他开源项目也有重要贡献。除此之外,Addy Osmani也是一位高产的博主(http://addyosmani.com/blog),同时也是O'reilly出版的《JavaScript设计模式》一书的作者。 徐涛(网名:汤姆大叔;微博:@TomXuTao),微软最有价值专家(MVP)、项目经理、软件架构师,擅长大型互联网产品的架构与设计,崇尚敏捷开发模式,熟悉设计模式、前端技术、以及各种开源产品,曾获MCP、MCSE、MCDBA、MCTS、MCITP、MCPD、PMP认证。《JavaScript编程精解》、《JavaScript启示录》译者,博客地址:Http://www.cnblogs.com/TomXu。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值