BackboneJs笔记之入门

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

特点：

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

搭建Backbone应用框架

下载 Backbone.js 文件
下载依赖库文件 Underscore.js
添加第三方JavaScript库，如jQuery、Zepto.js等，这里以jQuery为例。
将以上三个文件添加到Backbone应用页面的中,如下:
加载顺序为 jquery -> underscore.js -> backbone.js

<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页面

<!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>

页面显示结果：
在这里插入图片描述
参考资料

Backbone.js实战

BackboneJs笔记之入门

猜你喜欢