Backbone.js学习之旅（一）

时间 2019-11-11

标签 backbone.js backbone 学习之旅栏目 JavaScript 繁體版

原文原文链接

前言javascript

　　刚到粑粑公司，就学习各类框架，进行各类开发，为了记念挥泪的青春，只好写下……css

　　但愿能合您胃口^_^!!!html

The First（文件准备）java

　　backobone 强制依赖于 underscore.js ，非强制依赖于 jQuery。jquery

　　underscore下载地址：http://www.css88.com/doc/underscore/;app

　　backbone下载地址：http://www.css88.com/doc/backbone/;框架

　　建立目录结构以下（您所看到的js文件均是第三方库文件）：学习

　　index.html 导入文件：fetch

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>Backbone起步</title>
 6     </head>
 7     <body>
 8 
 9     <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
10     <script type="text/javascript" src="js/underscore.min.js" ></script>
11     <script type="text/javascript" src="js/backbone.min.js" ></script>
12     
13     </body>
14 </html>

The Second （分步解说）
this

既然是起步，就先从backbone最经常使用的模块儿提及： model , collection, view。

model: 比如学生

Collection: 比如一群学生

view: 比如把这群学生的信息呈现出来

界面功能描述（界面是有点丑了……^_^别介）：在输入框里输入姓名（如：石头），按下Enter键，便可添加 “你好，我叫石头” 到页面中

html 代码：

<div>
      <input type = text id = "addStudentIpt" placeholder="在此输入学生姓名，按Enter进行添加"/>
    </div><br>
    <div id = "studentList">
        <!--这里是全部新同窗的列表，存放 div class = oneStudent-->
    </div>

代码片断1：模板

<script type="text/template" id = "person-template">
      <div class = "oneStudent">
                你好， 我叫<%= name %>!
      </div>
    </script>

　　针对模板，我有一个特别通俗的理解，凡是界面里面须要数据更新的地方，大都须要设置为模板，以供View经过template实时更新。

　　细心的同窗能够发现，模板里面的内容和html很像，没错，就是html升级版，只是能够添加js代码，只是多了js能够更改的变量，用 <%= %> 包裹，那这些变量如何来呢？请看下面分析。

代码片断2：

 /*
       * 视图： 单个学生视图
       */
      var StudentView = Backbone.View.extend({
        tagName: 'div class = "oneStudent"',
        template: _.template($("#person-template").html()),
        initialize: function() {
          
        },
        render: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
        }
      });

　　视图，顾名思义，就是作和界面相关的事儿。好比说：渲染界面（render），给html传数据。

　　tagName: 就是view 中的 el，官方解释是：“全部的视图都拥有一个 DOM 元素（el 属性），即便该元素仍未插入页面中去。” 和 “this.el 能够从视图的 tagName, className, id 和attributes 建立，若是都未指定，el 会是一个空 div。” StudentView 的 el 就是经过tagName建立的。

　　template: 知道template是啥意思不？啊？不知道？ No problem! 我就叫它【模板】的定义。 _.template($("#person-template").html()) 中的 _. 就是underscore的代号，比如$表示jquery。而template就是underscore中的一个方法。连起来就是 _.template()。至于_.tempalte()里面的东东，天然就是代码片断1 中写的模板了，这里要拿过来给js用。记得这_.template()中的 id 要和代码片断1中的 id 保持同样哦！呼呼……这里扯的有点多了！赶忙，跟上！

　　initialize: 这里没写东西，不是就没用，只是暂时不用。强大的功能请看下文。 ^_^

　　render: 大boss终于来啦，渲染！这里渲染完成后，直接返回this（该视图，以供AppView使用,如：view.render().el）。 this.$el.html(this.template(this.model.toJSON())); 别看这是一句话，实际上是2句哦！^_^ this.$el.html(); 和 this.template(this.model.toJSON())。前一句话的意思，就是要把该视图的html内容设置为第二句话渲染返回的 html。第二句话 this.template()就是要把代码片断1 须要的参数(name) 传过去。但是，呜呜~~~~(>_<)~~~~ this.model.toJSON() 是什么玩意儿？ this.model 就是建立该 StudentView 的时候须要传入的参数（想知道怎么传的吗？请看代码片断4），也就是最前面定义的 Student (model)模型。代码以下：

代码片断3：

/*
       * 模型：学生
       */
      var Student = Backbone.Model.extend({
        //设置学生的属性
        defaults: {
          name: "stone"
        }
      });

该模型通过toJSON转换，天然就有了代码片断1所需的 name 参数。

　　唉，终于扯完一丢丢了，小女有点手酸了……你们还有疑问的，随时@哦。。。^_^

代码片断4：

var AppView = Backbone.View.extend({
        el: 'body',
        initialize: function() {
          //获取jquery对象
          this.input = this.$("#addStudentIpt");
          this.studentList = this.$("#studentList");
          
          //实例化集合（学生集）
          this.students = new Students();
          
          //添加监听事件
          this.listenTo(this.students, 'add', this.showNewStudent);
          
          //获取添加后保存的学生信息
          this.students.fetch();
        },
        //事件代理
        events:{
          "keypress #addStudentIpt": "addStudent"
        },
        //向集合里添加新同窗
        addStudent: function(e) {
          if(e.keyCode === 13){
            var stdName = this.input.val();
            //使用集合建立新学生，会出发add事件
            this.students.create({name: stdName});
          }
        },
        //在界面上显示添加的新同窗,参数student为 this.students集合中的一个模型
        showNewStudent: function(student) {
          var view = new StudentView({model: student});
          this.studentList.append(view.render().el);
        }
        
      });

　　这个View 主要是用于把控全局界面。好比：添加一个StudentView。代码虽多，但就不全说了。相信聪明的你根据注释，也基本上懂的大概了。

　　this.students: 集合Students 的一个实例。

　　this.students.create(): 集合建立模型的一个方法。

　　啦啦啦……第一篇“巨著”终于完咯……想继续后面的学习吗？请看下文…… 若无下文，献上亲亲一个^_^，嘻嘻，就有咯……

The Third（第一个实例）: Hello, 石头！

因为须要保存数据在本地，因此引入locaStorage.js。

完整代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Backbone起步</title>
        <style>
          #person {
            width: 200px;
            height: 200px;
            color: white;
            background-color: #0055aa;
          }
          input {
            width: 300px;
            height: 30px;
            border-radius: 5px;
          }
        </style>
    </head>
    <body>
    
    <!--============html代码========================-->
    <div>
      <input type = text id = "addStudentIpt" placeholder="在此输入学生姓名，按Enter进行添加"/>
    </div><br>
    <div id = "studentList">
        <!--这里是全部新同窗的列表-->
    </div>
    
    <!--==========引入文件==========================-->
    <script type="text/javascript" src="js/jquery-1.8.0.min.js" ></script>
    <script type="text/javascript" src="js/underscore.min.js" ></script>
    <script type="text/javascript" src="js/backbone.min.js" ></script>
    <script type="text/javascript" src="js/backbone.localStorage.js" ></script>
    
    <!--==========待渲染的模板======================-->
    <script type="text/template" id = "person-template">
      <div class = "oneStudent">
                你好， 我叫<%= name %>!
      </div>
    </script>
    
    <!--==========核心代码======================-->
    <script>
      /*
       * 模型：学生
       */
      var Student = Backbone.Model.extend({
        //设置学生的属性
        defaults: {
          name: "stone"
        }
      });
      
      /*
       * 集合： 学生集 
       */
      var Students = Backbone.Collection.extend({
        //学生集合中的模型为学生
        model: Student,
        //使用LocalStorage来保存数据
        localStorage: new Backbone.LocalStorage("msg-backbone")
      });
      
      /*
       * 视图： 单个学生视图
       */
      var StudentView = Backbone.View.extend({
        tagName: 'div class = "oneStudent"',
        template: _.template($("#person-template").html()),
        initialize: function() {
          
        },
        render: function() {
          this.$el.html(this.template(this.model.toJSON()));
          return this;
        }
      });
      
      /*
       * 视图： 全局视图
       */
      var AppView = Backbone.View.extend({
        el: 'body',
        initialize: function() {
          //获取jquery对象
          this.input = this.$("#addStudentIpt");
          this.studentList = this.$("#studentList");
          
          //实例化集合（学生集）
          this.students = new Students();
          
          //添加监听事件
          this.listenTo(this.students, 'add', this.showNewStudent);
          
          //获取添加后保存的学生信息
          this.students.fetch();
        },
        //事件代理
        events:{
          "keypress #addStudentIpt": "addStudent"
        },
        //向集合里添加新同窗
        addStudent: function(e) {
          if(e.keyCode === 13){
            var stdName = this.input.val();
            //使用集合建立新学生，会出发add事件
            this.students.create({name: stdName});
          }
        },
        //在界面上显示添加的新同窗,参数student为 this.students集合中的一个模型
        showNewStudent: function(student) {
          var view = new StudentView({model: student});
          this.studentList.append(view.render().el);
        }
        
      });
      
      var view = new AppView;
    </script>
    </body>
</html>