BackboneJs入门

Backbone.js是构建一个MVC类结构的JavaScript库,主要应用于构建大型逻辑复杂的单页应用。

特点

  • MVC结构化
  • 继承特性
  • 事件统一管理
  • 绑定页面模板
  • 服务端无缝交互

搭建Backbone应用框架

  1. 下载 Backbone.js 文件

  2. 下载依赖库文件 Underscore.js

  3. 添加第三方JavaScript库,如jQueryZepto.js等,这里以jQuery为例。

  4. 将以上三个文件添加到Backbone应用页面的<head></head>中,如下:

    加载顺序为 jquery -> underscore.js -> backbone.js

    1
    2
    3
    4
    5
    <head>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/underscore-1.4.4-min.js"></script>
    <script type="text/javascript" src="js/backbone-0.9.10-min.js"></script>
    </head>

第一个Backbone页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/underscore-1.4.4-min.js"></script>
<script type="text/javascript" src="js/backbone-0.9.10-min.js"></script>
<script type="text/javascript">
$(function(){
// 定义模型类
window.Test = Backbone.Model.extend({
defaults: {
content: ''
}
});

// 创建集合模型类
window.TestList = Backbone.Collection.extend({
model: Test
});

// 像模型添加数据
var data = new TestList({
content: 'hello,backbone!'
});

// 创建View对象
window.TestView = Backbone.View.extend({
el: $("body"),
initialize: function(){
$("#divTip").html(data.models[0].get("content"));
}
});

// 实例化View对象
window.App = new TestView;
})
</script>
</head>
<body>
<div id="divTip"></div>
</body>
</html>

页面显示结果:

参考资料

-------------本文结束感谢您的阅读-------------
Mr.wj wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!