1

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 イベントを監視するためのより良い構造は何でしょうか? ありがとう！

4

1 に答える 1

1

この質問には長い間回答がありませんでした。そのプロジェクトの実装を変更したため、触れませんでした。

グエンのコメントは非常に良い点を提供し、この質問を確認することを思い出させてくれます.

私もグエンさんの指摘に似た新たな理解を得ました。

何かがグローバルでなければなりません。それを避けることはできません。

これらには以下が含まれますが、これらに限定されません。

  • ルート
  • ページスクロール
  • ページの読み込み
  • ウィンドウのサイズ変更
  • グローバル キー ストローク
  • ...

バックボーンには、ルーティング イベントを処理するためのルートがあります。他のものはそれほど重要ではなく、人気もありませんが、ルーティングと同様に扱う必要があります。

私の意見では、より良いアプローチは次のとおりです。グローバルレベルでグローバルDOMイベントを監視し、誰が興味を持っていても気にしないアプリイベントを送信します。

この機能をやり直すと、次のようになります（疑似コード）

# 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コントローラーは好きなようにアプリイベントを監視し、scroll:bottom次のページを提供します。

このイベントに関心のある他の部分があるかもしれません。たとえば、フッター ビューで一番下にいることを示すボタンをポップしたり、もっと見たい場合はサインアップする必要があることを示す別の通知などです。彼らはアプリを聞くこともできます。 Marionette のおかげで、ウィンドウ レベルの DOM を管理する必要がなくなりました。

重要な更新 App ベントをコントローラー内で直接監視するが、モジュール レベルでは監視しない場合は、コントローラーがこのベントのリッスンを停止することを確認してください。そうしないと、リスナーが増加しApp.vents、メモリ リークが発生します。

# FooController
onClose: ->
  App.vent.off 'scroll:bottom'
于 2013-12-07T03:53:19.617 に答える