0

しばらくの間、これを解決しようとしてきたので、助けを求めたいと思います。ツリー構造と CompositeViews に関するDerick Bailey のブログ投稿を読みました。David Sulcも読みましたが、そこに記載されているユースケースとは少し異なると思います。注: 私のプロジェクトでは Marionette.js 1.0.3 を使用しています。

メールがテーブルに表示された受信トレイのように機能するものを構築しようとしています。電子メールはスレッドである場合があります。つまり、リンクされている他の電子メールがあります。<table>受信トレイ ビューは、それぞれ<tr>が電子メールである にレンダリングされています。私のJSONは次のようになります：

[
  {id: 1, subject: 'One', threads: []},
  {id: 2, subject: 'Two', threads: [
    {id: 3, subject: 'Three', threads: []},
    {id: 4, subject: 'Four', threads: []}
  ]},
  {id: 5, subject: 'Five', threads: []}
]

私のビューは次のように構成されています。

InboxView = Marionette.CompositeView.extend({
  // edited for brevity
  initialize: function(options) {
    this.itemView = EmailView;
  }
  // edited for brevity
});

EmailView = Marionette.CompositeView.extend({
  // edited for brevity
  tagName: 'tr',
  initialize: function(options) {
    this.collection = this.model.get('threads');
  },
  onRender: function() {
    if (this.model.isThread()) this.$el.addClass('thread');
  }
  // edited for brevity
});

私が抱えている問題は、モデルを 1 回レンダリングしてからスレッドのコレクションを 1 回レンダリングすることで CompositeView にその魔法を働かせると<tr>、<tr>元の電子メール (親）。

には、再利用しようとしているInboxView機能が存在します。EmailView私が最終的にやろうとしているのは、すべての行が同じレベルに表示されているテーブルです。

これを読んで私を助けたいと思ったら、よろしくお願いします！

4

1 に答える 1

0

まず、ビューを DOM にアタッチする必要があります。DOM にアタッチされる前に子ビューがレンダリングされるため、エラーが発生します。問題を解決するために、いくつかのメソッドをオーバーライドできます。それはトリックを行います：

EmailView = Marionette.CompositeView.extend({   

    className: function () {
        return this.model.isThread() ? 'thread' : null;
    },

    initialize: function (options) {
        this.collection = new Backbone.Collection(this.model.get('threads'));
    },

    renderItemView: function(view, index) {        
        this.$el.parent().append(view.el);

        view.render();
    }

});

InboxView = Marionette.CompositeView.extend({

    itemView: EmailView,

    ui: {
        $tbody: 'tbody'  
    },

    renderItemView: function (view, index) {
        this.ui.$tbody.append(view.el);

        view.render();
    }

});

JSFiddle : http://jsfiddle.net/d1krtxtr/

于 2014-11-18T18:57:29.167 に答える