模板控制的骨干列表項視圖標簽

Question

我有一個帶有一堆ListItemViews的ListView，使用html文件中的模板。 我很快發現，骨干預計以控制參與，以便它可以委托事件的元素，等等。 這樣的回答顯示了類似ID外層標簽定制共同的東西的標准方法。

我對模板中沒有外部標簽感到有些奇怪。 如果我想分配一個類甚至更改元素的種類，將其放在IMO模板中似乎更加直觀。 在大多數情況下，我可以將視圖分配給現有元素，但是對於集合的項目視圖，它必須從頭開始創建新的視圖和元素。

我可以使用setElement將字符串分配給el並委托事件。 但是，稍后（如在編輯之后）重新呈現控件時，這會斷開與DOM的連接。 我的解決方案是使用jQuery的replaceWith包裝setSelement，以將舊元素替換為新元素：

window.Backbone.View.prototype.replaceElement = (element) ->
  old = @$el
  @setElement element, true
  old.replaceWith @$el

然后，我可以在視圖中使用它：

render: () ->
  @replaceElement @template @model.toJSON()
  return @

使用模板：

<script id="actionTemplate" type="text/x-handlebars-template">
    <li id="{{id}}"><input type="checkbox" />{{name}}</li>
</script>

有人可以看到這個陷阱嗎？ 我主要擔心的是，它可能比僅替換現有標簽中的html還要慢，更重要的是，它還不夠習慣嗎？ 當框架真的希望我僅將標記的內容保留在模板中時，也許我在與框架作斗爭時很傻？

Answer 1

您的方法的問題在於，您的視圖@el仍然是被新視圖替換的原始視圖。 因此，您的所有事件偵聽器仍會收聽此舊元素。 因此，您必須編寫如下內容：

window.Backbone.View.prototype.replaceElement = (element) ->
  old = @$el
  @setElement element, true
  old.replaceWith @$el
  @setElement element

除此之外，如果您只想創建項目列表，則為每個項目創建一個新的視圖實例不是一個好主意。 一個具有ul元素和一個遍歷列表的模板的視圖就足夠了。

<script id="actionTemplate" type="text/x-handlebars-template">
    <ul>
    {{each items}}
        <li id="{{id}}"><input type="checkbox" />{{name}}</li>
    {{/each}}
    </ul>
</script>