2017-08-24 48 views
1

最近遇到了一個問題,由於嵌套問題,淘汰對HTML註釋的綁定不能很好地形成。我使用了一個html註釋來存放ko if:,然後使用ko foreach,它綁定到一個html <div>,但設法弄錯了嵌套。下面是問題的例子:如何驗證敲除數據綁定嵌套?

<!-- ko if: isGuestCheckout() --> 
    <div data-bind="foreach: formSection()"> 
<!-- /ko> 
Simple malformed knockout</div> 

在這個簡單的例子,很容易看到的問題是什麼,但在一個更大的HTML塊就更難發現錯誤。我最終採取了html註釋來結束每個淘汰賽的綁定,例如<!-- end isGuestCheckout() -->,這似乎效率低下。

是否有人知道驗證敲除數據綁定是否正確嵌套的方法?

+1

你可以經常使用正確的縮進來告訴它。不知道你的綁定有多複雜。 – Nisarg

+0

我遇到的問題是所有的html代碼摺疊工具都不能識別html註釋,並且會不一致地摺疊註釋。此外,縮進只適用於某一點,如果縮進不切實際就變得不切實際。 – bated

回答

1

我遇到過類似的問題,並且我在這些情況下爲解決問題所做的工作是爲每個嵌套的KO可觀察對象添加一個「whoami」可觀察對象,並在各種嵌套級別中放置一個簡單的跨度以給我一些瞭解什麼是約束和在哪裏。

舉例來說,如果我有這樣的視圖模型...

var myViewModel = function() { 
    var self = this; 
    self.whoami = ko.observable("I am the root view model"); 
    self.items = ko.observableArray(); //This holds an array of myItem 
}; 

var myItem = function() { 
    var self = this; 
    self.whoami = ko.observable("I am an item"); 
} 

然後我的HTML看起來像這樣...

<div> 
    <!-- At this level I expect to see the whoami from the root VM --> 
    <span data-bind="text: whoami"/> 

    <div data-bind="foreach: listOfItems"> 
     <!-- At this level I expect to see the whoami from the item --> 
     <span data-bind="text: whoami"/> 
    </div> 
</div> 

這樣做可以幫助我很快發現淘汰賽嵌套問題。一旦我找到它,我只需要拉出whoami span標籤,但是我通常最終會在JS中保留whoami的可見性,以防我再次需要它。

我希望這有助於! :-)