將Backbone View重新分配給新創建的DOM元素

Question

我正在使用Backbone與CoffeeScript和Handlebars一起創建搜索結果頁面。 我有兩個視圖：一個用於結果列表（ListView），第二個視圖用於單個結果（ResultView）。 簡化代碼：

ListView = Backbone.View.extend
  el: $("ul#results")
  ...

  addItem: (result) ->
    resultView = new ResultView({
      model: result
    })
    resultView.parentView = this
    this.el.append(resultView.render().el)

ResultView = Backbone.View.extend
  tagName: "li"
  className: "result"
  events:
    ...

簡短說明：

• ListView被分配給ul#results
• 將結果添加到列表視圖時，會創建一個ResultView，它知道其父級並呈現自身
• 對於li.result ，創建了一個元素li.result （默認的Backbone行為）

這是（簡化）我用來呈現搜索結果的模板：

<li class="result">
   <h1>
     <a href="{{link}}">{{title}}</a>
   </h1>
   <p>{{snippet}}</p>
</li>

這是我的難題，你可能已經發現了自己：我在Backbone ResultView 和我的模板中定義了一個li.result 。 我做不到的事：

• 將ResultView綁定到模板中的li.result ，因為它在DOM中尚不存在
• 從我的模板中刪除li.result ，因為我仍然需要它為那些沒有啟用JavaScript的人呈現頁面服務器端

有沒有辦法（優雅地）在實例化后將一個Backbone視圖重新分配給一個元素？ 或者簡單地說，我可以將ResultView引用到臨時元素，渲染模板然后將其移動到ul#result嗎？ 或者我是以錯誤的方式看待它？

謝謝！

Answer 1

我建議只從視圖中觸發渲染事件，然后在onRendered回調中執行操作，如下所示：

initialize: function() {
  this.bind('rendered', onRendered);
},

onRendered: function() {
   // do onRendered stuff
   // eg. remove an element from the template
},

render: function() {
  // your render stuff
  this.trigger('rendered');
}

Answer 2

我發現當你試圖支持服務器端渲染視圖和客戶端視圖時，事情總會變得復雜一些。 您在這里描述的場景就是一個很好的例子。

如果可能的話，我會將頁面的呈現移動到客戶端，這將極大地幫助簡化代碼。

話雖這么說，如果你確實想要保持服務器呈現的視圖，我可能會在頁面加載后從你的集合上執行fetch（）以從服務器獲取所有對象。 然后，您可以調整ResultView初始化函數以執行以下檢查。

ResultView = Backbone.View.extend
  initialize: (attributes) ->
    exisitingElement = $('result_' + attributes['id'])
    if exisitingElement?
      @el = exisitingElement 
      @delegateEvents()

然后，您將更改模板以包含唯一ID。

    <li id="result_{{id}}" class="result">
       <h1>
         <a href="{{link}}">{{title}}</a>
       </h1>
       <p>{{snippet}}</p>
    </li>

這樣，ResultView將在向頁面呈現新元素之前查找現有元素。 在重新分配@el屬性后手動調用delegateEvents（）可確保您定義的任何事件仍然有效。