4

Backbone.Marionette.CompositeView 内でスクロール イベントをキャプチャしようとしていますが、成功しません。

演習として、Backbone.Marionette を使用してhttp://www.atinux.fr/backbone-books/を書き直しています。ご覧のとおり、下にスクロールすると、より多くの本が取得されて表示されます (つまり、無限スクロール)。ただし、ビューでスクロール イベントをキャプチャできません。

これが私の（簡略化された）コードです：

  LibraryView = Backbone.Marionette.CompositeView.extend({
    // properties, initializer, etc.

    events: {
      'scroll': 'loadMoreBooks',
      'click': 'loadMoreBooks'
    },

    // some functions

    loadMoreBooks: function(){
      console.log("loadMoreBooks");
    }
  });

完全なソース コードは、 https ://github.com/davidsulc/backbone.marionette-atinux-books/blob/scroll/assets/javascript/app.js#L86-89 で確認できます。

私が理解していないのは、「クリック」イベントが適切にトリガーされていることですが、「スクロール」イベントはそうではありません。私は何を間違っていますか？

編集:エラーは最終的には非常に単純でした...ビューのコンストラクターに「el: #content」を渡していましたが、スクロールは「.library」の CSS で定義されていました。したがって、DOMを次のように変更したら

<div id="content">
  <div class="library">
  </div>
</div>

に

<div id="content" class="library"></div>

すべてが正常に機能しました...

4

3 に答える 3

16

Backbone は、すべてのイベントを探すために最上位のel要素に接続します。一部の DOM イベントは親要素にバブリングされず、これにはscrollが含まれます。バブルが発生するため、クリックイベントが機能しました。

参照: http://www.w3.org/TR/2009/WD-DOM-Level-3-Events-20090908/#event-type-scroll

于 2012-11-27T13:01:37.267 に答える
8

このコードは私のために働きます：

var View = Backbone.View.extend({
  events: { "scroll": "scroll" },
  scroll: function(){ console.log( "scrolling..." ); }
});

jsFiddle を確認する

@JoshLeitzelが言ったように、問題はDOM要素自体にあると思います。

バックボーンをバイパスしてみてください:

$("#content").bind( "scroll", function(){ console.log( "scrolling from jquery directly" ); } );

また、置き換えてみてください：

el: $('#content')

に

el: '#content'

これは問題ではないと思いますが、el定義の新しいスタイルです:)

于 2012-04-23T09:44:30.853 に答える
4

あなたが何であるかはわかりませんが、イベントelを受け取らないものだと思います。scrollBackboneはイベント処理をjQueryに委任するため、jQueryがscrollイベントについて何を言っているかを見てください。

ユーザーが要素内の別のscroll場所にスクロールすると、イベントが要素に送信されます。これはオブジェクトに適用されますが、 CSSプロパティがscrollに設定されている（または要素の明示的な高さまたは幅がコンテンツの高さまたは幅よりも小さい場合）windowスクロール可能なフレームおよび要素にも適用されます。overflowauto

これらの条件を満たす場合を除き、イベントelは受信されません。scrollイベントハンドラー、windowまたはそれを受け取る他の要素を配置する必要があります。

于 2012-04-21T17:39:40.777 に答える