3

私はbackbone.marionetteを使用しており、次のCollectionViewItemViewの組み合わせがあります。

  PlansListItemView = PlansApp.ItemView.extend
    tagName: "tbody"
    template: "#plansRow"    
    events:
      'click th.expander': 'expandDocuments'

    expandDocuments: (e) =>
      # do stuff

  PlansCollectionView = PlansApp.CollectionView.extend
    tagName: "table"
    itemView: PlansListItemView

ページに埋め込まれているjsonの初期コレクションからビューを作成します。イベントハッシュ内のイベントは完全に機能します。

次に、ドロップダウン変更イベントで、コレクションに対してfetch（）を呼び出して、オブジェクトの新しいコレクションを取得します。DOMは再構築されますが、イベントハンドラーは再接続されません/

なぜこれが起こるのか誰かが考えていますか？

4

1 に答える 1

1

手元にある正確な原因はわかりませんが、セットアップには、問題の一部である可能性があると思わせる面白いものがいくつかあります。

注：私はあなたが投稿したものに基づいて、あなたのコードとテンプレートについていくつかの大きな仮定をしています。私が言っていることの多くを無効にするようなことがいくつも起こっている可能性があります。しかし、あなたが投稿した内容を踏まえて、このコードをどのように整理するかについての私の考えを以下に示します。これは、発生している問題をクリーンアップするのに役立つ可能性があります。

悪いHTML出力？

各アイテムビューをタグとして設定しましたが、少なくとも構成したイベントに基づいて、そのビューによって<tbody>いくつかのタグがレンダリングされているように見えます。<th>

これにより、次のような無効なHTMLが生成されます。

<table>
  <tbody>
    <th></th>
  </tbody>
</table>

のテンプレートを見ないと言うのは難しい#plansRowですが、そういうものが出てくると思います。

問題は、コレクションビューがテーブルの生成に適していないことです。テーブル内に行を適切に生成し、テーブルタグラッパーを生成できますが、コレクションビューはテンプレートをレンダリングしないため、適切なテーブル構造に必要なテーブルヘッダー、フッター、本文、またはその他のタグを取得できません。自分自身の。ラッパータグを作成してから、コレクション内の各子をレンダリングするだけです。

これを修正するには、独自のテンプレートもレンダリングするCollectionViewであるCompositeViewを使用します。

複合ビューを備えたより優れたテーブル構造

Marionetteを使用してテーブルを作成するためのより適切な設定は、CompositeViewを親として使用し、各アイテムビューにtrタグをレンダリングさせることです。例えば：


RowView = Backbone.Marionette.ItemView.extend({
  template: "#row-template",
  tagName: "tr"
});

TableView = Backbone.Marionette.CompositeView.extend({
  template: "#table-template",
  tagName: "table",

  appendHtml: function(cv, iv){
    cv.$("tbody").append(iv.el);
  }
});

<table>これにより、複合ビューが設定されます。そのビューのテンプレートには<thead><th>...</th></thead><tbody></tbody>、テーブルを定義するための適切なタグが含まれます。

行ビューはタグとしてレンダリングされ<tr>、適切なタグを含む必要なデータが入力され<td>ます。

複合ビューのappendHtmlメソッドは、各アイテムビューを<tbody>親複合ビューのタグに挿入することを処理します。

このJSFiddleでこれのライブバージョンを見ることができます：http：//jsfiddle.net/derickbailey/me4NK/

そして、CompositeViewのこれと他の使用法に沿ったブログ投稿、ここ：http: //lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/

于 2012-05-22T17:04:58.470 に答える