web-dev-qa-db-ja.com

Backbone.Marionette onRenderコールバックは、ビューがブラウザーでレンダリングされる前に発生しますか？

設定

いくつかのコンテンツをレンダリングする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のタイムアウトを使用する私の解決策は通常の状況下で信頼できますか？

backbone.jssettimeoutmarionette
29
Ruben Ray Vreeken

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

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

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

41
Derick Bailey