我一直在尝试将一个处理程序附加到我的一个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;
}
);
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()函数。永远不要只是用另一个视图替换视图。
您可以让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.您可能希望保留窗口大小，而不需要每次检查它，因此您将窗口大小存储在骨干模型中：在这种情况下，窗口模型侦听窗口，而视图侦听窗口模型：
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});
}