29

設定

いくつかのコンテンツをレンダリングするBackbone.Marionette.ItemViewがあります。コンテンツがレンダリングされるときに、ビューの一部をスクロールバー付きのコンテナーに変換するjQueryプラグインを適用したいと思います。

スクロールバーは完全にjavascriptで実装されており、初期化時にスクロールコンテナの高さとコンテナ内のコンテンツの高さをチェックする必要があります。

コンテンツがコンテナよりも高い場合は、スクロールバーを有効にする必要があります。

問題

これはすべて単純に聞こえますが、私は奇妙な問題に遭遇しました：

onRenderコールバックでスクロールバープラグインを直接初期化すると、.scroll-container要素の高さが0、maxHeightが0であると思われるようです。

ただし、初期化コードを0msのタイムアウト内にラップすると、すべてが正常に機能し、.scroll-container要素のheightプロパティがjQueryによって正しく返され、スクロールバープラグインが正常に機能します。

コード

onRender: function() {
  var that = this;
  setTimeout(function() {
    that.onLayout();
    var $scrollContainer = that.$el.find('.scroll-container'), 
        scrollPane = new ScrollPane($scrollContainer, {
          maxHeightProperty: 'maxHeight',
          scrollUpButton: false,
          scrollDownButton: false
        });
  }, 0);
},

質問

onRenderコールバックの実行時に、ブラウザが新しく挿入されたhtmlのレンダリングを実際に終了しなかったために、問題が発生したと思います。

この仮定は正しいですか？もしそうなら、0msのタイムアウトを使用する私の解決策は通常の状況で信頼できますか？

4

1 に答える 1

41

問題のプラグインはDOMに依存しているため、onRender必要なことを実行しません。このコールバックは、ビューがレンダリングされた後に開始されますが、ビューがelまだDOMに追加されているという保証はありません。実際、まだ追加されていないという反対のことを想定しても安全です。

マリオネットを使用しRegionてビューを表示している場合は、ビューにメソッドを実装できonShowます。このメソッドは、リージョンがビューをDOMに追加した後、リージョンによって呼び出されます。これは、この状況を処理するために特別に実装されました。

これに関するもう少しの情報、および一般的なjQueryプラグインの操作については、次のブログ投稿を参照してください：http: //lostechies.com/derickbailey/2012/02/20/using-jquery-plugins-and-ui-controls- with-バックボーン/

于 2012-08-09T00:30:29.237 に答える