0

HTMLファイルのテンプレートを使用して、ListItemViewsの束を含むListViewがあります。バックボーンは、イベントなどを委任できるように、関連する要素をビューが制御することを期待していることをすぐに知りました。この回答は、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を単に交換するよりもおそらく遅いということです. タグのコンテンツだけをテンプレートに保持することを本当に望んでいるのに、フレームワークと戦うのはばかげているのでしょうか?

4

1 に答える 1

0

あなたのアプローチの問題は、@elあなたのビューがまだ元のものであり、新しいものに置き換えられていることです。したがって、あなたのすべてのイベントリスナーは、まだこの古い要素をリッスンしています。したがって、次のように書く必要があります。

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

これに加えて、アイテムのリストを作成したいだけなら、すべてのアイテムに対して新しいビュー インスタンスを作成するのは得策ではありません。リストを反復処理する要素とテンプレートを持つ 1 つのビューでul十分です。

<script id="actionTemplate" type="text/x-handlebars-template">
    <ul>
    {{each items}}
        <li id="{{id}}"><input type="checkbox" />{{name}}</li>
    {{/each}}
    </ul>
</script>
于 2012-09-17T06:35:51.893 に答える