在 Marionette 中观察窗口级 DOM 事件的更好结构？答案

【问题标题】：Better structure to watch window level DOM events in Marionette?在 Marionette 中观察窗口级 DOM 事件的更好结构？
【发布时间】：2013-11-20 11:25:31
【问题描述】：

在 CompositeView 中，我实现了这样的无限滚动

List.Foo extends Marionette.CompositeView

  initialize: (collection) ->
    @page = 1
    $(window).on('scroll', @loadMore)

  loadMore: =>
    if _nearBottom
      @page++
      App.vent.trigger('list:foo:near_bottom', @page)

  _nearBottom =>
    $(window).scrollTop > $(document).height - $(window.height) - 200

# Then I have the controller to process the event "list:foo:near_bottom", 
# to ask for adding one more page of data in collection.

代码基本上按预期工作。但我觉得它不能令人满意，因为我认为这个 ComposteView 会监视其范围之外的一些 DOM 事件，也就是窗口级 DOM 事件。

我想使用布局来观看此类事件并进行广播，但我的顶级布局似乎还不足以覆盖窗口/文档 :)

我的问题是，在 Marionette 中观看此类窗口/文档级 DOM 事件的更好结构是什么？谢谢！

【问题讨论】：

我一直在努力解决这个问题，我认为这是您必须处理的那些“非最佳实践”的事情之一。根据定义，Backbone 视图将始终处于比“窗口”级别更低的级别，并且根据定义，滚动事件通常需要在“窗口”级别捕获。这意味着通常不可能在视图范围内发生事件。请记住在关闭视图时清理监听器。
@TNguyen，非常感谢您的好意见！我也有一些新的理解，类似于你的，但有一些不同，所以我发布了我自己的答案。请检查:)

标签： backbone.js coffeescript marionette

【解决方案1】：

这个问题好久没有回答了，我在那个项目里改了实现，所以没碰。

Nguyen 的评论提供了非常好的观点，并提醒我复习这个问题。

我对Nguyen的观点也有了新的认识。

有些东西必须是全球性的，我们无法避免。

这些内容包括但不限于：

路线
页面滚动
页面加载
窗口大小调整
全局按键
...

Backbone 有路由来处理路由事件。其他的东西不是那么重要也不是那么流行，但它们仍然需要像路由一样对待。

在我看来，更好的方法是：在全局级别观察全局 DOM 事件，发送 App 事件，而不管谁可能对它感兴趣。

如果我重新做这个功能，我会做这样的事情（伪代码）

# App
App.on "initialize:after", ->
  @startHistory()
  @navigate('somePath', trigger: true) # Normal steps
  App.module('WindowWatcher').start()

# WindowWatcher module
ExampleProject.module "WindowWatcher", (WindowWatcher, App, Backbone, Marionette, $, _) ->
  class Watcher
    constructor: ->
      @watchPageScroll

    watchPageScroll: ->
      $(window).on('scroll', @_checkScroll)

    _checkScroll: ->
      if @_nearBottom:
        App.vent.trigger(scroll:bottom)

    _nearBottom:
      $(window).scrollTop > $(document).height - $(window.height) - 200

  WindowWatcher.on 'start' ->
    new Watcher()

然后List.Foo控制器将根据自己的喜好观看App事件scroll:bottom，并提供下一页。

可能还有其他部分对此事件感兴趣，例如在页脚视图中弹出一个按钮说你在底部，或者另一个通知说如果你想看到更多你需要注册等。他们也可以听由于 Marionette 的美感，App vent 无需管理窗口级 DOM。

重要更新 如果您直接在控制器内部而不是模块级别观看 App vents，请确保控制器将停止侦听此通风口，否则侦听器将在 App.vents 中增加，这是内存泄漏。

# FooController
onClose: ->
  App.vent.off 'scroll:bottom'

【讨论】：