ノックアウトデータバインドネストを検証する方法は？

Question

最近、ネストの問題のために、htmlコメントへのノックアウトバインディングがうまく形成されないという問題が発生しました。私はko if:を格納するhtmlコメントをどこで使用し、ko foreachを使用しましたが、これはhtml<div>にバインドされていましたが、間違ったネストを得ることができました。以下は問題の一例です：

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

この単純な例では、問題が何であるかを確認するために簡単ですが、はるかに大きいHTMLブロックではエラーを発見することは非常に困難です。私は結局のところ、ノックアウトバインディングの最後にhtmlのコメントをつけることに頼っていました。例えば、<!-- end isGuestCheckout() -->は非効率的です。

ノックアウトデータバインドが正しくネストされていることを検証する方法を知っている人はいますか？

Answer 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で観測可能なうわさを保ちます。

こちらがお役に立てば幸いです。 :-)