Backbone.js 簡易入門教程

時間  2019-11-08
標籤 backbone.js backbone 簡易 入門 教程 欄目 JavaScript 简体版
原文   原文鏈接

由於最近的工做中使用到了backbone.js框架，因此在網上找了些資料，可是關於這個框架的中文資料實在是太少了，沒有辦法，只好本身翻譯了壹篇簡單的入門教材。若是翻譯得很差，請你們口下留情。另外，你們也能夠簽出 Agility.js 的代碼，它也是壹個用於替代Backbone.js的壹個簡單框架。 javascript

這是壹個簡單的 Backbone.js 教程，由不言自明的"Hello World"到日益複雜的例子組成，它的出現是爲了提供壹個平滑的從零過渡到流行的 Todos樣例。
Backbone.js提供了壹個簡化的用於組織你的Javascript應用的MVC框架。目的是爲了獲得更加容易維護的代碼，經過解開那些富客戶端應用中相似「意大利麪條」式，在DOM的不一樣部分和後端服務器中的回調綁定。

教程開始於最小化的視圖(View)對象，而且逐步的介紹事件綁定、事件處理、模型與集合。壹旦進入教程，可使用右上角的導航菜單來查看其它例子。例子的序號按照其複雜程度遞增。 html

下面的代碼是基於HTML5的頁面，最好使用最新版本的Firefox/Chrome/Opera/Safari瀏覽，不要用IE瀏覽器，你懂的。 java

<!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title>hello-backbonejs</title>
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
    <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

    <script src="...number.js..." type="text/javascript"></script>
  </body>
  </html>

1.js  本例說明最小化的視圖的聲明與實例化。效果演示看這裏。 jquery

ListView類：是咱們的主要的應用視圖。 git

initialize()：自動調用上述實例，你能夠在這裏作除了界面元素事件之外的全部類型的綁定，好比說單擊事件等等。 github

render()：用於渲染整個視圖的函數。this.el：須要用戶手動調用。 ajax

listView實例：實例化整個視圖。 json

(function($){
//自運行的閉包
  var ListView = Backbone.View.extend({    
    el: $('body'), // attaches `this.el` to an existing element.

    initialize: function(){
      _.bindAll(this, 'render'); // fixes loss of context for 'this' within methods
       
       this.render(); // not all views are self-rendering. This one is.
    },

    render: function(){
      $(this.el).append("<ul> <li>hello world</li> </ul>");
    }
  });

  var listView = new ListView();      
})(jQuery);

2.js  本例說明如何綁定DOM事件到視圖的方法中。效果演示看這裏。 後端

events：DOM事件綁定到視圖方法中，Backbone沒有獨立的控制器來處理這種綁定，它們所有發生在視圖層中。 api

render()：正在展現如何將壹個按鈕來添加到新的list條目中。

addItem()：經過上述點擊事件自動觸發的自定義的函數。 

(function($){
  var ListView = Backbone.View.extend({
    el: $('body'), // el attaches to existing element

    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem'); // every function that uses 'this' as the current object should be in here
      
      this.counter = 0; // total number of items added thus far
      this.render();
    },

    render: function(){
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
    },

    addItem: function(){
      this.counter++;
      $('ul', this.el).append("<li>hello world"+this.counter+"</li>");
    }
  });

  var listView = new ListView();      
})(jQuery);

3.js  這個樣例說明如何使用模型中的集合來存儲數據，以及如何將數據的改變綁定到視圖。演示效果看這裏。

Item 類：模型層的原子（最小）部分。壹個模型是壹個基本的Javascript對象，例如：鍵值對，以及壹些用於事件響應、數據持久化的幫助函數等。

List 類：壹個條目的集合。基本上是壹些模型對象的數組和壹些幫助函數。

initialize() 正在實例化壹個集合，而且綁定它的添加事件到本身的方法 appendItem。（Backbone不在壹個單獨的控制器中提供回調函數用於綁定）。

Save 參考這個以便它可以訪問下面的callback範圍內的數據。

addItem() 如今獨立處理模型與視圖。如今視圖更新被授予下面的事件監聽器 appendItem()。

appendItem() 被集合事件add觸發，可視化的處理更新。 

(function($){

  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });      
  

  var List = Backbone.Collection.extend({
    model: Item
  });

  var ListView = Backbone.View.extend({
    el: $('body'),
    events: {
      'click button#add': 'addItem'
    },

    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); // remember: every function that uses 'this' as the current object should be in here
      
      this.collection = new List();
      this.collection.bind('add', this.appendItem); // collection event binder

      this.counter = 0;
      this.render();      
    },
    render: function(){

      var self = this;      
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){ // in case collection is not empty
        self.appendItem(item);
      }, this);
    },

    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter // modify item defaults
      });
      this.collection.add(item); // add item to collection; view is updated via event 'add'
    },

    appendItem: function(item){
      $('ul', this.el).append("<li>"+item.get('part1')+" "+item.get('part2')+"</li>");
    }
  });

  var listView = new ListView();
})(jQuery);

4.js  這個樣例說明如何渲染模型到專門查看的視圖。演示效果看這裏。

ItemView 類：負責渲染每一個獨立的條目。

appendItem() 再也不負責渲染獨立的項目。它如今授予 render() 方法到每一個獨立的 ItemView 實例。 

(function($){
  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });
  
  var List = Backbone.Collection.extend({
    model: Item
  });

  var ItemView = Backbone.View.extend({
    tagName: 'li', // name of (orphan) root tag in this.el
    initialize: function(){
      _.bindAll(this, 'render'); // every function that uses 'this' as the current object should be in here
    },
    render: function(){
      $(this.el).html('<span>'+this.model.get('part1')+' '+this.model.get('part2')+'</span>');
      return this; // for chainable calls, like .render().el
    }
  });
  
  var ListView = Backbone.View.extend({
    el: $('body'), // el attaches to existing element
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
      
      this.collection = new List();
      this.collection.bind('add', this.appendItem); // collection event binder

      this.counter = 0;
      this.render();
    },
    render: function(){
      var self = this;
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){ // in case collection is not empty
        self.appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter // modify item defaults
      });
      this.collection.add(item);
    },

    appendItem: function(item){
      var itemView = new ItemView({
        model: item
      });
      $('ul', this.el).append(itemView.render().el);
    }
  });

  var listView = new ListView();      
})(jQuery);

5.js  本例介紹兩個新的模型動做（交換與刪除） 說明這些動做應該如何在模型的視圖中被處理。演示效果看這裏。

Backbone.sync：使用匿名函數重載持久化存儲。這個屬性容許在不拋出異常信息的前提下使用 Model.destroy()。

ItemViews 對於每一個條目響應兩個點擊動做，交換與刪除。

initialize() 綁定模型更改與刪除到適當的事件。

render() 包含兩個額外的span以響應交換與刪除事件。

unrender()：讓模型從DOM中移除它本身。

swap() 會在內部交換條目的屬性，當.set()模型函數被調用，事務更新將會被觸發。

remove()：咱們使用destroy()方法從集合中移除模型。一般這也會從持久存儲中刪除記錄，可是咱們重載了它（參考以上例子）。 

(function($){

  Backbone.sync = function(method, model, success, error){ 
    success();
  }
  
  var Item = Backbone.Model.extend({
    defaults: {
      part1: 'hello',
      part2: 'world'
    }
  });
  
  var List = Backbone.Collection.extend({
    model: Item
  });

  var ItemView = Backbone.View.extend({
    tagName: 'li', // name of tag to be created        

    events: { 
      'click span.swap':  'swap',
      'click span.delete': 'remove'
    },    

    initialize: function(){
      _.bindAll(this, 'render', 'unrender', 'swap', 'remove'); // every function that uses 'this' as the current object should be in here

      this.model.bind('change', this.render);
      this.model.bind('remove', this.unrender);
    },

    render: function(){
      $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
      return this; // for chainable calls, like .render().el
    },

    unrender: function(){
      $(this.el).remove();
    },

    swap: function(){
      var swapped = {
        part1: this.model.get('part2'), 
        part2: this.model.get('part1')
      };
      this.model.set(swapped);
    },

    remove: function(){
      this.model.destroy();
    }
  });
  

  var ListView = Backbone.View.extend({
    el: $('body'), // el attaches to existing element
    events: {
      'click button#add': 'addItem'
    },
    initialize: function(){
      _.bindAll(this, 'render', 'addItem', 'appendItem'); // every function that uses 'this' as the current object should be in here
      
      this.collection = new List();
      this.collection.bind('add', this.appendItem); // collection event binder

      this.counter = 0;
      this.render();
    },
    render: function(){
      var self = this;
      $(this.el).append("<button id='add'>Add list item</button>");
      $(this.el).append("<ul></ul>");
      _(this.collection.models).each(function(item){ // in case collection is not empty
        self.appendItem(item);
      }, this);
    },
    addItem: function(){
      this.counter++;
      var item = new Item();
      item.set({
        part2: item.get('part2') + this.counter // modify item defaults
      });
      this.collection.add(item);
    },
    appendItem: function(item){
      var itemView = new ItemView({
        model: item
      });
      $('ul', this.el).append(itemView.render().el);
    }
  });

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