如何使用Backbone将调整大小事件添加到视图中的窗口？

Question

我一直在尝试将一个处理程序附加到我的一个Backbone视图中的resize事件。在做了一些研究之后，我发现你只能将事件附加到视图的元素或其后代。

这对我来说是一个问题，因为我试图实现的视觉效果不可能使用纯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事件，然后让视图或模型监听它以对各种元素进行自定义响应。

案例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您可能希望保留窗口的大小，而不每次你需要它的时候它检查，因此你存储在骨干模型窗口大小：在这种情况下，窗口模式侦听窗口，而视图听窗口模型：

window.onload = function() { 

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

    WindowModel = Backbone.Model.extend({ 

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

    set_size: function() { 
     this.set({ 
     width: window.innerWidth, 
     height: window.innerHeight 
     }); 
    } 

    }); 

    ViewWithModel = Backbone.View.extend({ 

    initialize: function() { 
     this.listenTo(this.model, 'change', this.print); 
     ... 
    }, 

    print: function() { 
     console.log('Window width, heigth: %s, %s', 
     this.model.width, 
     this.model.height); 
    }, 
    }); 

    var window_model = new WindowModel(); 
    var myview = new ViewWithModel({model: window_model}); 

}