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'

});

Marionette CompositeView attachHtml之后而不是追加

1 个答案: