2012-02-13 71 views
17

採用淘汰賽,當你調用ko.applyBinding(viewModel, "divId")它的遞歸通過你勢必(「DIVID」)元素的孩子結合了下來。我想在一個子節點停止這個評估。有沒有辦法做到這一點?如何停止knockout.js綁定評估的子元素

爲什麼...

我想整個頁面綁定到導航視圖模型的原因,這將處理基本的佈局和... ...微笑導航。在各種頁面上,我想將某些區域綁定到不屬於導航視圖模型屬性的不同視圖模型。目前,如果我這樣做,我得到「無法解析綁定」的錯誤,因爲導航視圖模型沒有所需的屬性。如果我能阻止綁定走下來,我可以分別綁定這些項目。我這樣做

回答

35

有幾種方法,你可以去在這一個。通常,您可以將多個「子」視圖模型添加到主視圖模型,然後使用實際視圖模型的各個區域上的綁定來綁定它們。

有可能在技術上你所追求的。您可以創建一個自定義綁定,告訴KO它將處理綁定兒童本身。它看起來像:

ko.bindingHandlers.stopBindings = { 
    init: function() { 
     return { controlsDescendantBindings: true }; 
    } 
}; 

當你把它放在一個元素上,然後KO會忽略孩子。然後,您可以使用不同的視圖模型對此元素的子元素調用ko.applyBindings。

樣品:http://jsfiddle.net/rniemeyer/tWJxh/

通常,雖然,你會使用with綁定使用一個主視圖模式下的多個視圖模型。

+1

優秀的東西,正是我想要的。我的情況可能不典型,但它給了我一個真正的模塊基於負載的方法,其中每個模塊獨立於所有其他的,使得測試的樂趣... – 2012-02-13 06:13:55

+0

這迫使使用額外的容器簡單地停止綁定;讓無容器(註釋)節點支持自定義綁定處理程序(如上面的stopBindings)會很容易嗎?這將在高度模塊化的應用程序是有用的:) – AlexG 2012-04-24 18:27:48

+0

在2.1(在RC),容器較少的自定義綁定處理程序將有可能像:http://jsfiddle.net/rniemeyer/75yQD/。所以,這將是沒有問題的。在2.0中,'ko.virtualElements.allowedBindings'沒有公開。 – 2012-04-24 18:35:17

3

一種方法是創建用於導航部分(或只是一個)和navVM綁定到它。然後爲內容創建另一節並將contentVM綁定到它。這樣就沒有衝突,而且它們都是非常分離的。

<body> 
    <div id="navSection"> 
    </div> 
    <div id="contentSection"> 
    </div> 
</body> 

然後做ko.applyBinding(navVM, 「navSection」)和ko.applyBinding(contentVM, 「contentSection」)

+0

嗯...很遺憾,創建兩個單獨的綁定上下文並不容易,這兩個綁定上下文在同一個子樹 – 2012-02-13 03:11:17

+1

中,你「可以」做到這一點(參見Ryan的註釋),我只是說它可能更有條理地想到你的組件作爲他們自己的鬆耦合模塊。 – 2012-02-13 17:02:57