1

我正在尝试缓存（使用 jQuery 选择器）视图中的一些子元素。

var theView = Backbone.View.extend({
    initialize:function(){
        this.$subEl = this.$el.find('.sub-el-class');
    },
    template: Handlebars.compile($('#view-template').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        this.$subEl.hide();
        return this;
    }
});

当我渲染视图时，$subEl (.sub-el-class) 没有隐藏。每次我必须在 .sub-el-class 元素上做某事时，我宁愿不必使用 jQuery 选择器。

有什么想法不适用于我的代码吗？

4

2 回答 2

3

每次render调用时，您的代码都会重新创建视图的全部内容。$el表示视图的根节点。所以你的缓存引用丢失了（如果有的话）。调用后，您需要更改代码以获取缓存的引用render。initialize不会调用render，它会在连接到视图的根元素之后立即执行。

var theView = Backbone.View.extend({
    initialize:function(){

    },
    template: Handlebars.compile($('#view-template').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
        this.$subEl = this.$el.find('.sub-el-class');
        this.$subEl.hide();
        return this;
    }
});

我还建议您添加代码以在视图关闭时销毁对缓存元素的任何引用。

于 2013-02-22T11:48:28.847 回答
2 
this.$subEl = this.$el.find('.sub-el-class');

这是一个指向 .sub-el-class 的指针，您在初始化视图时设置它。

每次调用 this.$subEl 时，它都已经是一个 jQuery 对象，因此它不会再次搜索 DOM。

于 2013-02-22T10:54:02.347 回答