BackboneJs笔记之入门

最新推荐文章于 2021-11-16 16:17:37 发布

栖溪阁晓生

最新推荐文章于 2021-11-16 16:17:37 发布

阅读量175

点赞数

分类专栏： # BackboneJS 文章标签： Backbone、前端

本文链接：https://blog.csdn.net/weixin_39455881/article/details/103020756

版权

BackboneJS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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实战

栖溪阁晓生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BackboneJs笔记之入门

Backbone.js是构建一个MVC类结构的JavaScript库，主要应用于构建大型逻辑复杂的单页应用。特点：MVC结构化继承特性事件统一管理绑定页面模板服务端无缝交互搭建Backbone应用框架下载 Backbone.js 文件下载依赖库文件 Underscore.js添加第三方JavaScript库，如jQuery、Zepto.js等，这里以jQuery为例。将...
复制链接

扫一扫