在 Marionette 中正确关闭视图

Question

我有一个基于 Backbone.Marionette 构建的应用程序，其中包含一个 CollectionView，它实例化了许多 CompositeView，它们呈现一个树结构。

我已通读 Zombie Views (Bailey on Zombies) 以及 View and Region 文档。但是，如果在阅读时一切看起来都很简单，那么执行就完全是另一个问题了。

当我击中任何路线时，我的键盘快捷键最终会被触发多次。我找到了一种解决方法，但是这种解决方法会导致在视图中呈现更改时出现其他问题。

这是多次触发键盘快捷键的实际代码。在Snippet A 中，我添加了我能想到的任何关闭视图的方法，尽管通常关闭视图只需要App.contentRegion.currentView.treeRegion.close()

showContentView: (tree) ->
  if @treeView?
    App.contentRegion.currentView.treeRegion.reset()
    App.contentRegion.currentView.treeRegion.close()
    @treeView.close()
    delete @treeView
  @treeView = new App.Note.TreeView(collection: tree)
  App.contentRegion.currentView.treeRegion.show @treeView

Snippet B，下面，修复了键盘快捷键问题。但是，它会导致无法将额外创建的模型（CompositeView）呈现给用户的问题。

showContentView: (tree) ->
  if @treeView?
    @treeView.collection = tree
    @treeView.render()
  else
    @treeView = new App.Note.TreeView(collection: tree)
    App.contentRegion.currentView.treeRegion.show @treeView

这里是我初始化 CollectionView 的地方，然后它会渲染 CompositeViews

initialize: -> # collectionView
  @listenTo @collection, "sort", @render
  @listenTo @collection, "destroy", @addDefaultNote
  Note.eventManager.on 'createNote', @createNote, this
  Note.eventManager.on 'change', @dispatchFunction, this
  @drag = undefined

initialize: -> # compositeView
  @collection = @model.descendants
  @bindKeyboardShortcuts()
  @listenTo @collection, "sort", @render
  Note.eventManager.on "setCursor:#{@model.get('guid')}", @setCursor, @
  Note.eventManager.on "render:#{@model.get('guid')}", @render, @
  Note.eventManager.on "setTitle:#{@model.get('guid')}", @setNoteTitle, @

这就是我在 CompositeViews 中绑定键盘快捷键的方式

bindKeyboardShortcuts: ->
  @.$el.on 'keydown', null, 'ctrl+shift+backspace', @triggerShortcut 'deleteNote'
  @.$el.on 'keydown', null, 'tab', @triggerShortcut 'tabNote'
  @.$el.on 'keydown', null, 'shift+tab', @triggerShortcut 'unTabNote'
  @.$el.on 'keydown', null, 'alt+right', @triggerShortcut 'tabNote'
  @.$el.on 'keydown', null, 'alt+left', @triggerShortcut 'unTabNote'
  @.$el.on 'keydown', null, 'alt+up', @triggerShortcut 'jumpPositionUp'
  @.$el.on 'keydown', null, 'alt+down', @triggerShortcut 'jumpPositionDown'
  @.$el.on 'keydown', null, 'up', @triggerShortcut 'jumpFocusUp'
  @.$el.on 'keydown', null, 'down', @triggerShortcut 'jumpFocusDown'
  @.$el.on 'keydown', null, 'alt+ctrl+left', @triggerShortcut 'zoomOut'
  @.$el.on 'keydown', null, 'alt+ctrl+right', @triggerShortcut 'zoomIn'

以及我如何触发它们

triggerShortcut: (event) -> (e) =>
  e.preventDefault()
  e.stopPropagation()
  @triggerEvent(event).apply(@, Note.sliceArgs arguments)
triggerEvent: (event) ->
  (e) =>
    @updateNote()
    args = ['change', event, @model].concat(Note.sliceArgs arguments, 0)
    Note.eventManager.trigger.apply(Note.eventManager, args)

最后，为了确保一切都是干净的，我取消了 onBeforeClose 中的每个快捷方式的绑定。我还取消绑定任何 eventManager 的侦听器。

onBeforeClose: ->
  console.log "view being closed", @
  @$el.off()
  Note.eventManager.off "setCursor:#{@model.get('guid')}"
  Note.eventManager.off "render:#{@model.get('guid')}"
  Note.eventManager.off "setTitle:#{@model.get('guid')}"
  Note.eventManager.off "timeoutUpdate:#{@model.get('guid')}"

我知道问题来自@treeView = new App.Note.TreeView(collection: tree)。如果我在每个 @showContentView（片段 A）上创建一个 new TreeView，每个添加的模型都会正确渲染到视图中，但快捷方式会变得疯狂。
另一方面，如果我创建一个 TreeView 并交换它的集合（片段 B），我会在视图中遇到渲染问题，但快捷方式很好！

我试图包含您需要的所有内容，仅此而已（这已经是相当多的代码了..），但如果你们还需要任何其他内容，请询问！
希望我能说得够清楚..

[编辑] 我尝试了许多不同的组合来摆脱快捷方式错误，但是如果我在每个 showContentView 上创建一个新的 TreeView，似乎没有什么可以正确关闭视图。 我认为这是来自更深层次的内存泄漏问题。我可能会在这方面写另一个 StackOverflow 问题，并链接到这个问题以获取更多信息。

非常感谢！

Answer 1

我知道这里有什么问题。

使用 Snippet A 和 chrome devtool 的分析器，我可以追踪泄漏。我在问题中提供的 onClose 方法来自 CompositeView，其中绑定了键盘快捷键。
问题是 CollectionView 没有得到垃圾收集，因为使用了 Note.eventManager.on，它保留了对视图的引用。 所以我在TreeView（CollectionView）中添加了一个onBeforeClose方法

onBeforeClose: ->
  Note.eventManager.off('createNote', @createNote, this)
  Note.eventManager.off('change', @dispatchFunction, this)
  @drag = undefined

使用这个 onBeforeClose，视图现在被正确关闭，这反过来又允许子视图也被关闭并停止监听被触发的快捷方式。

我想这很明显，一旦我发现，但我想添加这个答案，以便清楚地表明您在没有 @listenTo 的情况下设置的任何事件侦听器都不会被 Marionette 清除并且需要正确处理.

[编辑]

要跟进 cmets，从一开始这里会是一个更好的解决方案：

替换

initialize: -> # compositeView
  /* ... */
  Note.eventManager.on "setCursor:#{@model.get('guid')}", @setCursor, @
  Note.eventManager.on "render:#{@model.get('guid')}", @render, @
  Note.eventManager.on "setTitle:#{@model.get('guid')}", @setNoteTitle, @

还有

initialize: -> # collectionView
  /* ... */
  Note.eventManager.on 'createNote', @createNote, this
  Note.eventManager.on 'change', @dispatchFunction, this

与

initialize: -> # compositeView
  /* ... */
  @listenTo Note.eventManager, "setCursor:#{@model.get('guid')}", @setCursor
  @listenTo Note.eventManager, "render:#{@model.get('guid')}", @render
  @listenTo Note.eventManager, "setTitle:#{@model.get('guid')}", @setNoteTitle

/* ... */

initialize: -> # collectionView
  /* ... */
  @listenTo Note.eventManager, 'createNote', @createNote, this
  @listenTo Note.eventManager, 'change', @dispatchFunction, this

使用listenTo 语法本来可以防止内存泄漏。 因此，onBeforeClose 块可以完全删除！