Question

我正在尝试在视图中缓存（使用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选择器。

任何想法对我的代码不起作用？

Answer 1

每次调用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;
    }
});

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

Answer 2

this.$subEl = this.$el.find('.sub-el-class');

这是指向.sub-el-class的指针，您可以在初始化视图时进行设置。

每次调用它。$ subEl已经是一个jQuery对象，所以它不会再次搜索DOM。

在主干中缓存视图的子元素

2 个答案: