如何验证敲除数据绑定嵌套？

问题描述：

最近遇到了一个问题，由于嵌套问题，淘汰对HTML注释的绑定不能很好地形成。我使用了一个html注释来存放ko if:，然后使用ko foreach，它绑定到一个html <div>，但设法弄错了嵌套。下面是问题的例子：如何验证敲除数据绑定嵌套？

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

在这个简单的例子，很容易看到的问题是什么，但在一个更大的HTML块就更难发现错误。我最终采取了html注释来结束每个淘汰赛的绑定，例如，这似乎效率低下。

是否有人知道验证敲除数据绑定是否正确嵌套的方法？

你可以经常使用正确的缩进来告诉它。不知道你的绑定有多复杂。 – Nisarg

我遇到的问题是所有的html代码折叠工具都不能识别html注释，并且会不一致地折叠注释。此外，缩进只适用于某一点，如果缩进不切实际就变得不切实际。 – bated

答

我遇到过类似的问题，并且我在这些情况下为解决问题所做的工作是为每个嵌套的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的可见性，以防我再次需要它。

我希望这有助于！ :-)

如何验证敲除数据绑定嵌套？

相关推荐