javascript 如何使用 Backbone 向视图中的窗口添加调整大小事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9110060/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I add a resize event to the window in a view using Backbone?
提问by Alex Tworowsky
I have been trying to attach a handler to the resize event in one of my Backbone views. After doing some research I have discovered that you can only attach events to the view's element or its descendants.
我一直在尝试将处理程序附加到我的主干视图之一中的调整大小事件。在做了一些研究之后，我发现您只能将事件附加到视图的元素或其后代。
This is an issue for me because the visual effect I am trying to achieve is not possible using pure CSS and requires some JS to set the dimensions of the content area element based on the window minus the header element.
这对我来说是个问题，因为我试图实现的视觉效果无法使用纯 CSS 实现，并且需要一些 JS 来设置基于窗口减去标题元素的内容区域元素的尺寸。
If you are having trouble visualizing what I am trying to do, imagine a thin header and a content area which must occupy the remaining space with no CSS background trickery ;)
如果您无法想象我要做什么，请想象一个细小的标题和一个必须占据剩余空间的内容区域，而没有 CSS 背景技巧；)
I've attached a code example. If you have any other pointers I'd also love to hear them!
我附上了一个代码示例。如果您有任何其他指示，我也很想听听！
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;
}
);
Any assistance would be greatly appreciated by my face.
我的脸将不胜感激任何帮助。
Thankyou, Alex
谢谢你，亚历克斯
回答by roberkules
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);
}, ...
Don't forget to call the remove()function on the view. Never just replace the view with another one.
不要忘记remove()在视图上调用该函数。永远不要只是用另一个视图替换视图。
回答by Luca Bonavita
You might let window.onresize trigger a custom backbone.jsevent and then let Views or Models listen to that to have custom responses for various elements.
你可以让 window.onresize 触发一个自定义的Backbone.js事件，然后让 Views 或 Models 监听它来为各种元素提供自定义响应。
Case 1.A view listens to the window event directly.
案例 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();
}
Case 2.You may want to retain the window size without inspecting it each time you need it, hence you store the window size in a backbone model: in this case the window model listens to the window, while the view listens to the window model:
情况 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});
}
