如何使用Backbone在视图中向窗口添加resize事件？

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()在视图上调用该函数.永远不要只用另一个替换视图.