在Backbone項目中使用backbone.layoutmanager來組織頁面布局

bbb 的 init 命令生成的初始化模板工程中包含有 backbone.layoutmanager 插件, 該插件提供了一種頁面的結構化組織方式, 將 Backbone Views 組裝成頁面布局 Layout.

backbone.layoutmanager 主要的目的是提供一種規(guī)則來管理 Backbone.View 的渲染, 程序員只需要遵循這套規(guī)則, 就能簡化頁面渲染的實現(xiàn). backbone.layoutmanager 主頁已經(jīng)很詳細地介紹了使用方法, 這里就不再贅述. 下面是個人感覺在學習使用過程中感覺應當注意的幾點:

完全受管理的 render

Backbone.LayoutView 僅僅是一個將 manage 屬性設置成 true 的 Backbone.View.

1
2
3

Backbone.LayoutView = Backbone.View.extend({
  manage: true
});

只有當 manage 屬性被設置為 true, LayoutManager 才會接管 Backbone.View 的渲染.

數(shù)據(jù)和模板

視圖的渲染需要 template 和 serialize 屬性, 分別對應HTML模板和數(shù)據(jù)模型. LayoutManager 缺省使用 underscore 的 template 函數(shù)進行頁面的渲染.

嵌套視圖

可以通過 setView, setViews, insertView, insertViews 等函數(shù)在視圖中嵌套多個其他的子視圖.

BeforeRender 和 AfterRender

render 完全處在 LayoutManager 的管理下, 因此, 如果你想在每次視圖渲染前后做一些特殊的處理, 必須定義 beforeRender 和 afterRender 函數(shù). 由于 LayoutManager 內(nèi)部會在渲染視圖前移除所有附加模式的子視圖, 因此, 通常在 beforeRender 函數(shù)中調(diào)用 setView 和 insertView 來增加和設置子視圖.

如果你不想在每次渲染時移除子視圖, 自己控制子視圖的增刪, 可以設置子視圖的 keep 屬性為 true.

Cleanup 函數(shù)

很多視圖(View)都有數(shù)據(jù)模型(model)的事件綁定函數(shù), 因此, 必須在視圖被刪除后解除綁定. 可以通過定義視圖的 cleanup 函數(shù)來完成這個解綁操作:

1
2
3
4
5
6
7
8
9
10
11
12

var MyView = Backbone.View.extend({
  // The constructor binds the model's "change" event to the view's render function. 
  initialize: function() {
    this.model.on("change", this.render, this);
  }，

  // This is a custom cleanup method that will remove the model events owned by
  // this View.
  cleanup: function() {
    this.model.off(null, null, this);
  }
});

自定義獲取模版

LayoutManager 缺省只支持 script 標簽的模版, 但是在實際軟件項目中, 通常會將不同的模版放置在不同的單獨的 html 文件中, 這樣便于模版文件的管理. LayoutManager 提供了 fetch 配置項讓我們有機會來自己獲得模版文件:

1
2
3
4

  Backbone.LayoutManager.configure
    # Default fetch implementation, get template from `script` tag
    fetch: (path)->
      _.template $(path).html()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  JST = window.JST = window.JST or {}
  Backbone.LayoutManager.configure
    manage: true
    paths:
      layout: "templates/layouts/"
      template: "templates/"

    fetch: (path) ->
      path = path + ".html"
      unless JST[path]
        $.ajax(
          url: app.root + path
          async: false
        ).then (contents) ->
          JST[path] = _.template(contents)
      JST[path]

下面是作者的教學視頻, 初學者一定要看看.

backbone.layoutmanager from tbranyen on Vimeo.