如何验证剔除数据绑定嵌套？答案

【问题标题】：How to validate knockout data-bind nestings?如何验证剔除数据绑定嵌套？
【发布时间】：2018-02-02 22:35:50
【问题描述】：

最近遇到了一个问题，由于嵌套问题，敲除绑定到 html cmets 格式不正确。我使用 where html 注释来容纳 ko if:，然后使用绑定到 html <div> 的 ko foreach，但设法弄错了嵌套。以下是该问题的示例：

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

在这个简单的示例中，很容易看出问题所在，但在更大的 html 块中，发现错误要困难得多。我最终在每个淘汰赛绑定的末尾都使用了 html cmets，例如 ，这似乎效率低下。

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

【问题讨论】：

您通常可以通过使用适当的缩进来判断它。不确定您的绑定有多复杂。
我遇到的问题是所有的 html 代码折叠工具都不能识别 html cmets 并且会不一致地折叠 cmets。当进一步缩进变得不切实际时，缩进也只能在一定程度上起作用。

标签： html knockout.js knockout-3.0

【解决方案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>

这样做有助于我快速发现 Knockout 嵌套问题。一旦我找到它，我就只需拉出 whoami span 标签，但我通常最终会在 JS 中保留 whoami observable，以防我再次需要它。

我希望这会有所帮助！ :-)

【讨论】：