使用 CompositeView 渲染递归结构，同时使用 Marionette 将每个模型封装在 ItemView 中

Question

我将从一个明确的问题开始，然后解释：
如何正确地将包含在 CompositeView 中的模型封装到 ItemView 中

我的问题很简单，但我无法设法让一些好的工作。 我有一棵笔记树。 每个笔记都是一个 Backbone.model 并且有一个 @descendants 集合， 然后我有一个 Backbone.Collection 来代表那棵树（其中@descendants 是一个实例） 我设置了一个基本的CollectionView，作为itemView，CompositeView。一切都完美呈现，我对此感到非常高兴。此工作解决方案显示在代码的第一个 sn-p 中！

问题来了。在此基础上，我遇到了这个问题：Events fired for whole hierarchy 这对于我的事件如何绑定是有意义的。起初，我只是简单地添加了独特的选择器（将 data-guid 添加到我的 html 元素中，以便我可以通过它获取它们）并且它工作正常，尽管它已经变得“hacky”。但是其他类似的问题已经出现，所以我决定我需要一个解决方案。 所以，我告诉 myslef，让我们将每个模型封装在一个 ItemView 中，并使用 Composite 视图递归地渲染它们。 但是……这并不是世界上最好的……

这是我一开始的：

class Note.ModelView extends Marionette.CompositeView
  template: "note/noteModel"
  id: "note-item"
  itemViewContainer: ".note-descendants"
  ui:
    noteContent: ".noteContent"
  events:
    "keypress .noteContent": "createNote"
    "click .destroy": "deleteNote"
  # ...
  initialize: ->
    @collection = @model.descendants
  # ...

class Note.CollectionView extends Marionette.CollectionView
  id: "note-list"
  itemView: Note.ModelView
  initialize: ->
    @listenTo @collection, "sort", @render

现在我将所有属于渲染模型的东西都转移到了一个新的 ItemView 中

  class Note.ModelView extends Marionette.ItemView
    template: "note/noteModel"

    ui:
      noteContent: ".noteContent"
    events: ->
      guid = @model.get 'guid'
      events = {}
      events["keypress #noteContent#{guid}"] = "createNote"
      events["blur #noteContent#{guid}"] = "updateNote"
      events["click #destroy#{guid}"] = @triggerEvent 'deleteNote'

    initialize: ->
      @bindKeyboardShortcuts()
      @listenTo @model, "change:created_at", @setCursor

  class Note.TreeView extends Marionette.CompositeView
    template: "note/parentNote"
    itemView: Note.ModelView

    initialize: ->
      @collection = @model.descendants
      @listenTo @collection, "sort", @render
      _.bindAll @, "renderItem"
    renderItem: (model) ->
      if model.get('parent_id') is 'root'
        itemView = new Note.ModelView model: model
        itemView.render()
        @$el.append itemView.el
    onRender: ->
      @collection.each this.renderItem
      @renderItem @model
    appendHtml: (collectionView, itemView) ->
      @model.descendants.each (note) =>
        iv = new Note.ModelView model: note
        iv.render()
        @.$('.note-descendants').append iv.el


  class Note.CollectionView extends Marionette.CollectionView
    id: "note-list"
    itemView: Note.TreeView
    initialize: ->
      @listenTo @collection, "sort", @render

还有noteMode模板（parentNote现在只是一个空模板）

<button class="btn btn-danger btn-xs untab">UN</button>
<button class="btn btn-success btn-xs tab">TAB</button>
<div class="noteContent">{{{indent}}}{{{title}}}</div>
<button class="destroy"></button>
<div class="note-descendants"></div> # That is where I'm putting the children notes

所以这几乎可以工作了。但它很老套，而且......好吧，它仍然不能正常工作。我一直在阅读所有文档，并且我已经阅读了这两个链接Derick Bailey on nested structure and CompositeView 和 David Sulc on Nested Views，但我仍然觉得我遗漏了一些重要的细节。

作为答案，我正在寻找的是使用 Marionette 管理此问题的任何提示或任何常用方法。我真的在寻找干净的东西，因为这将是构建应用程序的角度之一。
也许我也在错误的地方搜索？任何事情都会受到欢迎！！非常感谢

祝大家有个愉快的夜晚。 感谢您的宝贵时间。

Answer 1

我将用不同的语言向你解释 Derick Bailey 在你引用的博文中已经说过的内容。

观看次数

您需要两个视图才能完成这项工作。

第一个，“母视图”，是包含递归结构作为其子节点的最外层视图。这可能是 Marionette.CollectionView 或 Marionette.CompositeView。

第二个视图是您的递归视图，这意味着它需要是 Marionette.CompositeView。通过不指定“itemView”属性，您可以递归 Marionette.CompositeView。在缺少 itemView 属性的情况下，Marionette.CompositeView 将使用 ITSELF 来呈现给定集合的模型。

收藏

您需要一个集合，它可以是嵌套 Backbone.Collections 的 Backbone.Collection，或者只是包含深度嵌套哈希的 Backbone.Collection。在后一种情况下，您不必忘记将简单的哈希值转换为 Backbone.Collections，然后将它们交给 Marionette.CompositeView（如下面在 RecursiveView 的 initialize() 方法中所做的那样）。

把它们放在一起

var RecursiveView = Marionette.CompositeView.extend({
    template: '#someTemplate',
    initialize: function () {
        this.collection = this.model.get('children')
    }
});

var MotherView = Marionette.CollectionView.extend({
    itemView: RecursiveView,
    collection: new Backbone.Collection([{key: 'value', children: [{}, {}, {}]}])
});

问题：事件冒泡

现在，DOM 事件自然会冒泡，所以这段代码

var RecursiveView = Marionette.CompositeView.extend({
    events: {
        'click button': someCallback
    }
});

对于它所引用的视图以及它的所有后代事件来说都是一个包罗万象的东西。

这个问题最简单的解决方案是使用直接后代css选择器>，例如

var RecursiveView = Marionette.CompositeView.extend({
    events: {
        'click >button': someCallback
    }
});

如果这还不够，一种有效的解决方案是防止自动事件冒泡，例如

var RecursiveView = Marionette.CompositeView.extend({
    events: {
        'click button': function (event) {
            event.stopPropagation();
            // or event.stopImmediatePropagation() depending on your use case
            // cf. http://stackoverflow.com/a/5299841/899586 and 
        }
    }
});