Javascript js CompositeView-如何在不嵌套的情况下渲染模型和集合

我想寻求一些帮助，因为我已经尝试解决这个问题一段时间了。我读过树结构和复合视图。我也读过，但我有一个我认为与这里描述的用例稍有不同的用例。注意：我的项目使用的是marionete.js 1.0.3

我正在尝试构建一个类似于收件箱的东西，在表格中显示电子邮件。电子邮件可能是一个线程，这意味着它将有其他电子邮件链接到它。“收件箱”视图将在中呈现，其中每个视图都是一封电子邮件。我的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
});

我遇到的问题是，如果我让CompositeView为我发挥它的魔力，先渲染一次模型，然后渲染一次线程集合，我最终会得到两个表行，一个是原始电子邮件父级中的每个线程

InboxView和EmailView中存在我试图重用的功能。我想要得到的是一个表，它的所有行都显示在同一级别

---

如果你正在读这篇文章，想帮助我，请提前谢谢你

首先，您应该将视图附加到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();
    }

});

---

jshiddle:

我在appendHtml:cv.$el.afteriv.$el；中使用了非常类似的东西；。然而，在这两种情况下，所有发生的事情都是，我在InboxView中只收到了没有线程的电子邮件和父级电子邮件。不会显示线程电子邮件。