jquery - Marionette CompositeView AttachHtml after 而不是追加

Question

我有一个具有父子关系的模型，我想在表格显示中显示每个父级，然后是子级，我将在其中稍微缩进子级。我已经快到了，但我似乎只能将子项附加到父行，而不是将它们添加到父行之后。

View.TreeView = Backbone.Marionette.CompositeView.extend({
  template: listItemTpl,
  tagName: "tr",
  initialize: function() {
    var children = new Backbone.Collection(this.model.get('children'));
    if (this.model.get('parent')) {
      this.$el.addClass('child');
    } else {
      this.$el.addClass('parent');
    }
    this.collection = children;
  },

  attachHtml: function(collectionView, childView, index) {
    collectionView.$el.append(childView.el);
  }
});

View.TreeRoot = Backbone.Marionette.CompositeView.extend({
  tagName: "table",
  className: "table table-bordered table-striped",
  childView: View.TreeView,
  template: listTpl,
  childViewContainer: "tbody"
});

我已经尝试过

collectionView.$el.after(childView.el);

但这根本不起作用。

我的模型父子模型是使用 sailsjs 在服务器端创建的，如下所示。

module.exports = {
  schema: true,
  attributes: {
    name: 'string',
    category: {
      model: 'Category'
    },
    parent: {
      model: 'Term'
    },
    children: {
      collection: 'Term',
      via: 'parent'
    }
  }
};

Answer 1

我遇到了类似的问题，最终我使用了多个表。将父对象放在 thead 中，将子对象放在 tbody 中。

如果你想走这条路，有一个提示:

使用一个compositeView，它的模型是父对象，集合是子对象，它的模板是你的表。在 thead 部分显示模型数据，将 childViewContainer 设置为 tbody，并使用 tr 作为 tagName。

(感谢 JSteunou @ GitHub)

List.Child = App.Views.ItemView.extend({
  template: "urltotemplate",
  tagName: 'tr'
});

List.Parent = App.Views.CompositeView.extend({
  template: "urltotemplate",
  tagName: 'table',
  childView: List.Child,
  childViewContainer: 'tbody',

  initialize: function(options){
    this.collection = this.model.get("children");
  }
});

List.Parents = App.Views.CompositeView.extend({
  template: "urltotemplate",
  childView: List.Parent,
  childViewContainer: 'div.container'

});