2011-10-05 140 views
12

我與Backbone.js的建立一些複雜的視圖關係的工作,如果有從做一些看起來像這樣的JavaScript性能的角度來看什麼問題我想知道:嵌套意見骨幹JS

var viewOne = Backbone.View.extend({ 
     tagName : 'li', 
     initialize : function() { 
       this.v2 = new viewTwo({parent:this}); 
     }, 
     clickHideOne : function() { 
       $(this.el).removeClass('selected'); 
     } 
}); 

var viewTwo = Backbone.View.extend({ 
     tagName : 'a', 
     initialize : function() { 
       this.bind('click', this.clickHide, this); 
     }, 
     clickHide(){ 
       $(this.el).removeClass('selected'); 
       this.options.parent.clickHideOne(); 
     } 
}); 

如果是這種兩個視圖之間的循環引用的一個非常簡單的例子中,爲了有事件在一個視圖中容易向上傳播的視圖的鏈,或保持在父視圖的對象的任何引用。是否有任何情況下,這會成爲一個問題,特別是與IE7 +中DOM元素引用的潛在泄漏相關的問題,還是有其他推薦的用於引用父視圖的最佳做法。

而且,據我所知,我可能只是這樣做$(this.el).parent( '禮')removeClass( '選擇')。鑑於兩個,這不是重點......這只是我對循環引用問題的一個非常簡單的例子。

回答

15

有負責子視圖父視圖是不是一個壞主意,是骨幹一個相當常見的場景。我在上面的代碼中看到的問題是,子視圖有其父視圖的知識。我建議在viewTwo中使用自定義事件,並讓viewOne綁定到這些事件,然後做出相應的響應。

這是通過使用觸發器()方法和bind()方法用骨幹相當容易。

+0

這聽起來像一個很好的方法,我想我也想知道爲什麼它會特別有害的孩子視圖有父視圖的知識嗎? – tgriesser

+3

因爲子對象不負責創建父對象,所以它不應該知道它並且完全獨立。你基本上正在創造不必要的依賴。 –

+1

但是,如果父對象存在依賴關係,就不會有意義...就像如果沒有父對象的情況下子對象不能存在 - 並且您可以切換哪個對象是視圖的「父對象」比必須重新定義綁定和觸發 – tgriesser

0

嵌套是保持分層的觀點編寫維護的代碼複雜的用戶界面的一個好辦法。在這個簡單的例子中,幾乎沒有任何性能問題,但在更復雜的情況下,您需要記住嵌套的深度。 例如,在數千行的網格中使用複雜的單元格渲染器可能會導致應用程序不可用。在這種情況下,通常可以進行聰明的優化,例如。使用渲染器僅用於可見的網格單元格。

2

循環引用是一個壞主意。正如凱爾所說,這也不是一種好的做法,孩子的觀點對其父視圖有明確的參照。顯式引用只能在視圖層次結構中向下。也就是說,父視圖對所有子視圖進行顯式引用,並調用子視圖的方法與它們進行交互是很好的典型做法。 (請參閱Backbone.Subviews mixin,瞭解如何創建和管理子視圖)。然而,最好的封裝實踐決定一個視圖不應該有明確的引用或直接直接調用其兄弟姐妹或其父母的方法。

爲了與兄弟姐妹或父母溝通,你有我所知道的三個選項:

  1. 使用view.trigger()觸發的子視圖(或兄弟姐妹)的事件,再有父(或兄弟姐妹)使用view.listenTo()收聽該事件。這種方法很有效,但是當你想要一個子視圖與其祖父通信時,它就開始崩潰了。另外,如果你在同胞中使用這種方法,你會創建不需要的顯式依賴項。

  2. 你可以使用Backbone.Courier,它是一個插件,可以很容易地在視圖層次結構中冒泡事件。對於同級視圖之間的通信,一個兄弟會將一個事件吹到父級,然後父級直接調用另一個兄弟的方法。

  3. 您可以使用event aggregator充當子對象與父對象之間或兄弟對象之間的中間對象。這樣,這些視圖就可以通過聚合器進行交流,而不會明確地相互引用。但是,這種方法需要全局聚合器對象,並且還允許縱橫交錯的隱式依賴關係,隨着視圖數量的增長,這可能變得很難管理。

+0

這3個選項是偉大的處理通信之間的意見..但我只是想知道的情況下,我有一個視圖'A'有子視圖,其中一個調用模態,當模態結束時觸發。該模式打破了層次結構,所以我應該使用Event Aggregator作爲我的視圖'A'監聽它? – mateusmaso