木偶.js复合视图 - 如何在不嵌套的情况下渲染模型和集合

Marionette.js CompositeView - How to render model and collection without nesting

本文关键字：情况下 模型 集合 嵌套 视图 复合 js 木偶      更新时间：2023-09-26

我想寻求一些帮助，因为我已经尝试解决这个问题一段时间了。我读过Derick Bailey关于树结构和CompositeViews的博客文章。我也读过David Sulc的，但我认为用例与那里描述的用例略有不同。注意：我的项目使用木偶.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
});

我遇到的问题是，如果我让 CompositeView 通过渲染一次模型然后渲染一次线程集合来为我发挥它的魔力，我最终会在原始电子邮件（父电子邮件）的<tr>内<tr>两行表（每个线程一个）。

我尝试重用的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();
    }
});

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

相关文章：