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

Question

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

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

在这个简单的示例中很容易看出问题所在，但在更大的 html 块中更难发现错误。我最终求助于 html 每个敲除绑定结束的评论，例如 ，这似乎效率低下。

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

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>

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

希望对您有所帮助！ :-)

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

How to validate knockout data-bind nestings?

html

knockout.js

knockout-3.0