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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程