1

私たちは Marionette.js を使用しており、ウィンドウのサイズ変更に基づいてレイアウトのアクティブなテンプレートを切り替えられることを期待していました。ただし、getTemplate()ビューの読み込み時に関数が 1 回だけ呼び出されるようです。

マリオネットにレイアウトがロードされた後に現在のテンプレートを切り替える方法はありますか? 次のコードがあります。

initialize: function() {
    //... other code
    this.windowWidth = 0;
    $(window).resize(this.resizeHandler);
},

getTemplate: function () {
    if (this.windowWidth <= 1050) {
      return "#small-screen-template"; 
    }
    return "#large-screen-template"; 
},

resizeHandler: function () {
    this.windowWidth = $(window).width();
}
4

1 に答える 1

2

これは完全にはテストされていませんが、initialize メソッドを変更して「render」の呼び出しも含めることができます。また、イベント ハンドラのクリーンアップも忘れてはなりません。

初期化を基本的に次のように変更します。

initialize: function(options) {
    //..
    this.windowWidth = 0;

    $(window).on("resize", this.resizeHandler);
    $(window).on("resize", this.render);       
}

クリーンアップ メソッドを追加します (マリオネットの onClose ):

onClose: function() {
    $(window).off("resize", this.resizeHandler);
    $(window).off("resize", this.render);                
}

これを行うことにより：

  • 画面のサイズが変更されると、windowWidth が正しく更新されます
  • その後、別のコールバックが呼び出され、ビューが再レンダリングされます
  • ビューが閉じられると、window オブジェクトからのコールバックが解放されます

理論的には機能するはずですが、決してテストされていません

于 2013-07-04T13:09:28.450 に答える