因为最近都在看《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