フェッチを介してイベントを更新した後に発生しないバックボーンイベント

StackOverflow https://stackoverflow.com//questions/10703768

  •  13-12-2019
  •  | 
  •  

質問

Backbone.marionetteを使用しており、次のCollectionView ItemViewの組み合わせがあります。

  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は再構築されますが、イベントハンドラは再現されない/

これが起こるかもしれない理由は誰でも持っていますか？

役に立ちましたか？

解決

私は正確な原因を知らないが、あなたのセットアップにいくつかの面白いものがあり、それは私に問題の一部かもしれないと思います。

注：あなたが投稿したものに基づいて、コードとテンプレートについていくつかの大きな仮定をしています。私が無効と言っていることを大いにすることができることが起こっているかもしれません。あなたが投稿したものを考えると、私がこのコードをどのように整理するかについての私の考えはあなたが見るのを整理するのに役立つかもしれません。

悪いHTML出力？

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

これは無効なHTMLを生成します。

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

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

問題は、コレクションビューがテーブルを生成するのには良くないということです。それらは、テーブルの上の行を細かく、テーブルタグのラッパーに生成することができますが、それらはテーブルのヘッダー、フッター、ボディ、その他のタグを取得することができません。コレクションビューはテンプレートをレンダリングしないため自分自身の。それらはwrapperタグを作成してから、コレクション内の各子をレンダリングします。

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

複合ビューを備えたより良い表構造

マリオネットを構築するためのより適切な設定は、親として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では、このJSFIDDLEにライブバージョンを見ることができます。 http://jsfiddle.net/derickbailey/me4nk /

と複合材料の他の用途に沿って行くブログ投稿： http://04/05/2012/04/05/2012/04/05/Composite-views-tree-structures-tables-and-more /

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top