javascript - 在 Backbone.js 视图中多次引用 div

Question

想知道处理这个问题的最佳方法是什么。假设我有一个 div，我在我的一个 Backbone 视图中的多个方法中引用它，我不想每次都重新查询它。

例如

Backbone.View.extend({
    showReviewOverlay : function(evt) {
        var $overlay = $('#js-add-review-overlay');
        $(evt.currentTarget).prepend($overlay.show());
    }
    hideReviewOverlay : function(evt) {
        var $overlay = $('#js-add-review-overlay');
        $(evt.currentTarget).closest($overlay.hide());
    }
});

引用它的首选方法是将其声明为对象吗？还是有一些我不知道的更好的模式？

例如

Backbone.View.extend({
    overlay : { 'container' : $('#js-add-review-overlay') },

    showReviewOverlay : function(evt) {
        $(evt.currentTarget).prepend(this.container.overlay.show());
    }
    hideReviewOverlay : function(evt) {
        $(evt.currentTarget).closest(this.container.overlay.hide());
    }
});

Answer 1

如果这是特定情况，您可能会在render调用时获取对元素的引用：

Backbone.View.extend({
    render: function () {
        // do rendering stuff
        this.$overlay = this.$('#js-add-review-overlay');
    },
    showReviewOverlay : function(evt) {
        $(evt.currentTarget).prepend(this.$overlay.show());
    }
});