在骨幹中緩存視圖的子元素

我試圖緩存（與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選擇器。

任何想法什麼不能用我的代碼？

來源

2013-02-22 Lukmo

每次調用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-22 11:48:28 WiredPrairie

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

這是.SUB-EL級的指針，你把它當你初始化你的看法。

每當你調用它時，$ subEl都是一個jQuery對象，所以它不再搜索DOM。

來源

2013-02-22 10:54:02 Oden

好吧，那是件好事。沒有任何方法可以緩存嗎？爲了可維護性的目的，我寧願使用諸如$ subEl的變量，而不是每次查找。 – Lukmo 2013-02-22 10:57:06

在var this。$ subEl初始化之後，它已經被緩存了，你不需要做任何事情。 – Oden 2013-02-22 11:38:53

這不應該起作用。問題是，當我們初始化視圖時，大多數時候對象仍然不存在於DOM中，所以我們正在緩存一些不存在的東西。這個引用不是動態的：如果我們之後渲染這個對象，這個。$ subEl仍然是空的。 – 2015-05-11 23:35:35

在骨幹中緩存視圖的子元素

回答

相關問題