バックボーンを使用してビュー内のウィンドウにサイズ変更イベントを追加するにはどうすればよいですか？

Question

私は、バックボーンビューの1つでサイズ変更イベントにハンドラをアタッチしようとしています。いくつかの調査をした後、私はあなたがビューの要素またはその子孫にのみイベントを添付できることを発見しました。

これは、私が達成しようとしている視覚効果が純粋なCSSを使用することができず、いくつかのJSがウィンドウからヘッダー要素を引いたコンテンツ領域要素の寸法を設定する必要があるためです。

あなたがいないCSSの背景の策略で、残りのスペースを占有しなければならない薄いヘッダとコンテンツ領域を想像し、私がやろうとしていますどのような視覚化する問題がある場合;）

私は、コード例を添付しました。あなたが他のポインタを持っているなら、私も彼らのことを聞きたいです！

define(
    [ 
     'jQuery', 
     'Underscore', 
     'Backbone', 
     'Mustache', 
     'text!src/common/resource/html/base.html' 
    ], 
    function ($, _, Backbone, Mustache, baseTemplate) { 
     var BaseView = Backbone.View.extend({ 

      el: $('body'), 

      events: { 
       'resize window': 'resize' 
      }, 

      render: function() { 
       var data = {}; 

       var render = Mustache.render(baseTemplate, data); 

       this.$el.html(render); 

       this.resize(); 
      }, 

      resize: function() { 
       var windowHeight = $(window).height(); 

       var headerHeight = this.$el.find('#header').height(); 

       this.$el.find('#application').height(windowHeight - headerHeight); 
      } 
     }); 

     return new BaseView; 
    } 
); 

私の援助をいただければ幸いです。

ありがとう、 アレックス

Answer 1

var BaseView = Backbone.View.extend({ 

    el: $('body'), 

    initialize: function() { 
     // bind to the namespaced (for easier unbinding) event 
     // in jQuery 1.7+ use .on(...) 
     $(window).bind("resize.app", _.bind(this.resize, this)); 
    }, 

    remove: function() { 
     // unbind the namespaced event (to prevent accidentally unbinding some 
     // other resize events from other code in your app 
     // in jQuery 1.7+ use .off(...) 
     $(window).unbind("resize.app"); 

     // don't forget to call the original remove() function 
     Backbone.View.prototype.remove.call(this); 
     // could also be written as: 
     // this.constructor.__super__.remove.call(this); 
    }, ... 

ビューにremove()関数を呼び出すことを忘れないでください。ビューを別のビューに置き換えてはいけません。

Answer 2

window.onresizeにカスタムbackbone.jsイベントをトリガーさせてから、ViewsまたはModelsにそれを聞かせて、さまざまな要素に対するカスタム応答を持たせることができます。

ケース1ビューは、ウィンドウイベントを直接リッスンします。この場合には、ウィンドウ・モデルは、窓に耳を傾け：あなたは、したがって、あなたが基幹モデルでウィンドウサイズを格納し、それをあなたがそれを必要とするたびに検査せずにウィンドウのサイズを保持することをお勧めします

window.onload = function() { 

    _.extend(window, Backbone.Events); 
    window.onresize = function() { window.trigger('resize') }; 

    ViewDirect = Backbone.View.extend({ 

    initialize: function() { 
     this.listenTo(window, 'resize', _.debounce(this.print)); 
    }, 

    print: function() { 
     console.log('Window width, heigth: %s, %s', 
     window.innerWidth, 
     window.innerHeight); 
    }, 

    }); 

    var myview = new ViewDirect(); 

    } 

ケース2ビューはウィンドウモデルをリッスンします。