Backbone.js學習之Backbone.View（視圖）

　　Backbone.js為復雜WEB應用程序提供模型(models)、集合(collections)、視圖(views)的結構。其中模型用於綁定鍵值數據和自定義事件；集合附有可枚舉函數的豐富API； 視圖可以聲明事件處理函數，並通過RESRful JSON接口連接到應用程序。

【介紹】

　　當我們開發含有大量Javascript的web應用程序時，首先你需要做的事情之一便是停止向DOM對象附加數據。 通過復雜多變的jQuery選擇符和回調函數很容易創建Javascript應用程序，包括在HTML UI，Javascript邏輯和數據之間保持同步，都不復雜。 但對富客戶端應用來說，良好的架構通常是有很多益處的。

　　通過Backbone，你可以將數據呈現為 Models, 你可以對模型進行創建，驗證和銷毀，以及將它保存到服務器。 任何時候只要UI事件引起模型內的屬性變化，模型會觸發"change"事件； 所有顯示模型數據的 Views 會接收到該事件的通知，繼而視圖重新渲染。 你無需查找DOM來搜索指定id的元素去手動更新HTML。 — 當模型改變了，視圖便會自動變化。

　　某種意義上說，在用javaScript來創建web項目時，Backbone試圖定義一組最小而高效的集合，包括了數據結構（models（模型） 和 collections（集合））和用戶接口（views（視圖） 和 URLS）。在web開發環境里，到處都是框架（幫你寫好了一切），不過這些庫需要你的網站在構建的時候符合該框架的樣子，風格，默認的行為。但是，Backbone還是作為一個工具，讓你可以隨心所欲的設計你的網站。

 

Backbone.View（視圖）

　　Backbone 視圖幾乎約定比他們的代碼多 — 他們並不限定你的HTML或CSS， 並可以配合使用任何JavaScript模板庫。 一般是組織您的接口轉換成邏輯視圖， 通過模型的支持， 模型變化時， 每一個都可以獨立地進行更新， 而不必重新繪制該頁面。我們再也不必鑽進 JSON 對象中，查找 DOM 元素，手動更新 HTML 了，通過綁定視圖的 render 函數到模型的 "change" 事件 — 模型數據會即時的顯示在 UI 中。

1.extend    Backbone.View.extend(properties, [classProperties])
　　開始創建自定義的視圖類。 通常我們需要重載 render 函數，聲明 events， 以及通過 tagName, className, 或 id 為視圖指定根元素。

var DocumentRow = Backbone.View.extend({

  tagName: "li",

  className: "document-row",

  events: {
    "click .icon":          "open",
    "click .button.edit":   "openEditDialog",
    "click .button.delete": "destroy"
  },

  initialize: function() {
    this.listenTo(this.model, "change", this.render);
  },

  render: function() {
    ...
  }

});

    直到運行時， 像tagName, id, className, el, 和 events這樣的屬性也可以被定義為一個函數，

2.constructor / initialize     new View([options])

　　有幾個特殊的選項， 如果傳入，則直接注冊到視圖中去： model, collection, el, id, className, tagName, attributes 和 events。 如果視圖定義了一個initialize初始化函數， 首先創建視圖時，它會立刻被調用。 如果希望創建一個指向 DOM 中已存在的元素的視圖，傳入該元素作為選項：new View({el: existingElement})。

var doc = documents.first();

new DocumentRow({
  model: doc,
  id: "document-row-" + doc.id
});

3.el  view.el
　　所有的視圖都擁有一個 DOM 元素（el 屬性），即使該元素仍未插入頁面中去。 視圖可以在任何時候渲染，然后一次性插入 DOM 中去，這樣能盡量減少 reflows 和 repaints 從而獲得高性能的 UI 渲染。 this.el 可以從視圖的 tagName, className, id 和 attributes 創建，如果都未指定，el 會是一個空 div。

var ItemView = Backbone.View.extend({
  tagName: 'li'
});

var BodyView = Backbone.View.extend({
  el: 'body'
});

var item = new ItemView();
var body = new BodyView();

alert(item.el + ' ' + body.el);

4.$el   view.$el
　　一個視圖元素的緩存jQuery對象。 一個簡單的引用，而不是重新包裝的DOM元素。

view.$el.show();

listView.$el.append(itemView.el);

5.setElement   view.setElement(element)
　　如果你想應用一個Backbone視圖到不同的DOM元素， 使用setElement， 這也將創造緩存$el引用，視圖的委托事件從舊元素移動到新元素上。

6.attributes   view.attributes
　　屬性的鍵值對， 將被設置為視圖el上的HTML DOM元素的屬性， 或者是返回這樣的鍵值對的一個函數。

7.$ (jQuery)   view.$(selector)
　　如果頁面中引入了 jQuery，每個視圖都將擁有 $ 函數，可以在視圖元素查詢作用域內運行。 如果使用該作用域內的 jQuery 函數，就不需要從列表中指定的元素獲取模型的 ids 這種查詢了，我們可以更多的依賴 HTML class 屬性。 它等價於運行：view.$el.find(selector)。

ui.Chapter = Backbone.View.extend({
  serialize : function() {
    return {
      title: this.$(".title").text(),
      start: this.$(".start-page").text(),
      end:   this.$(".end-page").text()
    };
  }
});

8.template view.template([data])
　　雖然模板化的視圖 不是Backbone直接提供的一個功能， 它往往是一個在你視圖定義template函數很好的約定。 如此， 渲染你的視圖時， 您方便地訪問實例數據。 例如，使用Underscore的模板：

var LibraryView = Backbone.View.extend({
  template: _.template(...)
});

9.render  view.render()
　　render 默認實現是沒有操作的。 重載本函數可以實現從模型數據渲染視圖模板，並可用新的 HTML 更新 this.el。 推薦的做法是在 render 函數的末尾 return this 以開啟鏈式調用。

var Bookmark = Backbone.View.extend({
  template: _.template(...),
  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  }
});

　　Backbone並不知道您首選HTML模板的方法。 render（渲染） 函數中可以采用拼接HTML字符串，， 或者使用document.createElement生成DOM樹。 但還是建議選擇一個好的 Javascript 模板引擎。 Mustache.js, Haml-js, 和 Eco 都是很好的選擇。 因為Underscore.js已經引入頁面了，如果你喜歡簡單的插入JavaScript的樣式模板。  _.template可以使用並是一個很好的選擇。

　　無論基於什么考慮，都永遠不要在 Javascript 中拼接 HTML 字符串。 在DocumentCloud中， 我們使用Jammit 來打包JavaScript模板，並存儲在/app/views中，作為我們主要的core.js包的一部分。

10.remove   view.remove()
　　從 DOM 中移除一個視圖。同事調用stopListening來移除通過 listenTo綁定在視圖上的 所有事件。

11.delegateEvents  delegateEvents([events])
　　采用 jQuery 的on函數來為視圖內的 DOM 事件提供回調函數聲明。 如果未傳入 events 對象，使用 this.events 作為事件源。 事件對象的書寫格式為 {"event selector": "callback"}。 省略 selector 則事件被綁定到視圖的根元素（this.el）。 默認情況下，delegateEvents 會在視圖的構造函數內被調用，因此如果有 events 對象，所有的 DOM 事件已經被連接， 並且我們永遠不需要去手動調用本函數。

　　events 屬性也可以被定義成返回 events 對象的函數，這樣讓我們定義事件，以及實現事件的繼承變得更加方便。

　　視圖 render 期間使用 delegateEvents 相比用 jQuery 向子元素綁定事件有更多優點。 所有注冊的函數在傳遞給 jQuery 之前已被綁定到視圖上，因此當回調函數執行時， this 仍將指向視圖對象。 當 delegateEvents 再次運行，此時或許需要一個不同的 events 對象，所以所有回調函數將被移除，然后重新委托 — 這對模型不同行為也不同的視圖挺有用處。

　　搜索結果頁面顯示文檔的視圖看起來類似這樣：

var DocumentView = Backbone.View.extend({

  events: {
    "dblclick"                : "open",
    "click .icon.doc"         : "select",
    "contextmenu .icon.doc"   : "showMenu",
    "click .show_notes"       : "toggleNotes",
    "click .title .lock"      : "editAccessLevel",
    "mouseover .title .date"  : "showTooltip"
  },

  render: function() {
    this.$el.html(this.template(this.model.attributes));
    return this;
  },

  open: function() {
    window.open(this.model.get("viewer_url"));
  },

  select: function() {
    this.model.set({selected: true});
  },

  ...

});

12.undelegateEvents   undelegateEvents()
　　刪除視圖所有委托事件。如果要從臨時的DOM中禁用或刪除視圖時，比較有用。

 

 

 

via:http://backbonejs.org/