5

開始の問題

コレクション内の各モデルが 2 つのテーブル行として表される CompositeView (テーブル) があり、次のようなテンプレートがあります。

<tr class="row-parent">
    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>
</tr>

次のような ItemView を使用します。

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl
});

「親」と「子」という名前が付いていますが、実際には同じモデルのピア メンバーです。tagName を指定しないと、Backbone は各ビューを<div>無効な HTML でラップし、レイアウトを壊します。

ソリューションへの最初の試み

そこで、外側の<tr>タグを削除して Backbone に追加させてみませんか? そこで、テンプレートを次のように更新しました。

    <td>parent info here</td>
</tr>
<tr class="row-child">
    <td>child info here</td>

ビューを次のように更新しました。

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl,
    tagName: 'tr',
    className: 'row-parent'
});

外側のタグが内側のタグ フラグメントと結合することを期待していましたが、Marionette はそれを好みませんでした。行の子のみが表示されました。だから、ここからどこへ行けばいいのかわからない。2 つの戦略を検討していますが、まだ詳細には触れていません。

今後: プラン A

Backbone の任意の部分をオーバーライドして余分な div を作成しないようにするか、ビューを追加する Marionette の部分をオーバーライドして、追加する直前に div を削除します。

今後: プラン B

CompositeMultiView と呼ばれる新しいタイプのビューを作成します。これは当然、CompositeView から拡張され、2 番目の ItemView またはビューの配列を指定できるようになります。これらはすべて、指定されたモデルごとにレンダリングされます。この計画は、より多くの作業のように見えますが、ハッキングは少ないようです。

上記の2つの計画のいずれかを実装する方法について、より良い提案、回避策、または具体的な指針を誰かが持っていますか?

テーブルがどのように見えるかのモックアップを次に示します。 ここに画像の説明を入力

4

3 に答える 3

4

tbodyテーブルには複数のタグがあり、それぞれに複数のタグが含まれていることを最終的に発見するまで、同じ問題に苦労していましたtr。

これは実際には、同様のバックボーンの質問に対して提供された回答です。

だからあなたItemViewは次のようになります：

var ItemView = Backbone.Marionette.ItemView.extend({
    template: ItemTmpl,
    tagName: 'tbody'
});

そして生成されたhtml：

<table>
  <!-- first item -->
  <tbody>
    <tr class="row-parent">
      <td>parent info here</td>
    </tr>
    <tr class="row-child">
      <td>child info here</td>
    </tr>
  </tbody>
  <!-- second item -->
  <tbody>
    <tr class="row-parent">
      <td>parent info here</td>
    </tr>
    <tr class="row-child">
      <td>child info here</td>
    </tr>
  </tbody>
  ...
</table>
于 2015-06-12T04:10:10.143 に答える
1

次のように CompositeView を変更してみてください。

  1. itemViewビューの配列として指定
  2. addChildViewモデルごとに各ビューをレンダリングするようにオーバーライドする

このソリューションは、最終的に「プラン B」によく似ています。試してみます：

itemView: [My.ParentView, My.ChildView],

addChildView: function(item, collection, options){
  this.closeEmptyView();
  var itemViews = this.getItemView(item);
  var index = this.collection.indexOf(item);

  _.each(itemViews, function(ItemView) {
    this.addItemView(item, ItemView, index);
  });
}

これで などのモデル イベントを処理できるかどうかは考えていませんがdestroy、適切に処理できるはずです。

于 2013-09-09T17:37:30.103 に答える
0

汚い解決策: ItemView にカスタム レンダリング関数を追加する

// Or whatever template you use
var template = Handlebars.compile(datepickerTemplate);

var ItemView = Backbone.Marionette.ItemView.extend({
    render: function(){
        var html = template(this.model.toJSON());
        var newElement = $(html);
        this.$el.replaceWith(newElement);
        this.setElement(newElement);
        return this;
    }
});

これにより、余分な div ラッピングが削除されます

于 2013-09-09T18:03:29.147 に答える