我如何使用骨干视图resize事件添加到窗口？ [英] How do I add a resize event to the window in a view using Backbone?
问题描述
我一直在试图附加处理程序resize事件在我的意见骨干之一。做一些研究后，我发现，你可以只重视事件视图的元素或其后代。
这对我来说是一个问题，因为我试图达到的视觉效果是不可能使用纯CSS和需要一些JS来设置内容区域元素为基础的窗口减去头元素的尺寸。
如果您有麻烦形象化什么，我试图做的，试想一个薄头和必须占无CSS背景挂羊头卖狗肉的剩余空间内容区域;）
我已经附加了code例子。如果您有任何其它指针我也很想听听他们！
定义（
[
jQuery的，
下划线，
'骨干'，
'胡子'，
的文字！SRC /普通/资源/ HTML / base.html文件
]
功能（$，_，骨干，小胡子，baseTemplate）{
VAR基本视角= Backbone.View.extend（{ EL：$（'身体'）， 事件：{
调整窗口'：'调整'
}， 渲染：功能（）{
VAR数据= {}; 变种渲染= Mustache.render（baseTemplate，数据）; 这$ el.html（渲染）; this.resize（）;
}， 调整：功能（）{
变种WINDOWHEIGHT = $（窗口）.height（）; VAR headerHeight = $这个el.find（'＃头'）的高度（）。 。这$ el.find（'＃应用程序），高度（WINDOWHEIGHT - headerHeight）;
}
}）; 回到新的基本视角;
}
）;
任何援助将大大AP $ P $由我的脸pciated。
三江源，
亚历克斯
VAR基本视角= Backbone.View.extend（{ EL：$（'身体'）， 初始化：功能（）{
//绑定到命名空间（更容易解除绑定）事件
// jQuery中使用1.7+。对（...）
$（窗口）.bind（resize.app，_.bind（this.resize，本））;
}， 删除：功能（）{
//取消绑定命名空间的事件（以prevent意外取消绑定一些
从其他code在您的应用程序//其他的resize事件
// jQuery中使用1.7+ .off（...）
$（窗口）.unbind（resize.app）; //不要忘记调用原始remove（）函数
Backbone.View.prototype.remove.call（本）;
//也可以写为：
// this.constructor .__超__ remove.call（本）;
}，...
不要忘记调用视图上的删除（）功能。从来都只是替换另一个视图。
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.
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 ;)
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
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.
这篇关于我如何使用骨干视图resize事件添加到窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
