编写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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值