BackboneJs笔记之入门

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

特点:

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

搭建Backbone应用框架

  1. 下载 Backbone.js 文件
  2. 下载依赖库文件 Underscore.js
  3. 添加第三方JavaScript库,如jQuery、Zepto.js等,这里以jQuery为例。
  4. 将以上三个文件添加到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实战
发布了2 篇原创文章 · 获赞 0 · 访问量 20
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览