Marionette CompositeView attachHtml 之后而不是追加答案

【问题标题】：Marionette CompositeView attachHtml after rather than appendMarionette CompositeView attachHtml 之后而不是追加
【发布时间】：2015-03-31 19:21:14
【问题描述】：

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

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'
    }
  }
};

【问题讨论】：

父母和孩子会是同一张表的行吗？是这样吗？
你能把收藏/型号代码也显示一下吗？
是的，所以希望同一张表中的所有行都按他们的顺序排列，就像 Parent Child Child Child Parent Child Child Child Parent Child Child Child Child 不确定我的主干模型和集合是否有用它没有那么多。
好吧，模型告诉我们你的父母和孩子之间的关系是如何完成的。在选择最佳方法时，我确实很重要。
好的，最好使用sails js从服务器显示模型，因为这是生成带有父子关系的json的原因。 module.exports = { schema: true, attributes: { name: 'string', category: { model: 'Category' }, parent: { model: 'Term' }, children: { collection: 'Term', via: 'parent' } } };

标签： jquery sails.js marionette waterline insertafter

【解决方案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'

});

【讨论】：