如何验证knockout数据绑定嵌套?

时间:2017-08-24 22:31:17

标签: html knockout.js knockout-3.0

最近遇到了一个问题,由于嵌套问题,敲除绑定到html注释的问题并不完善。我使用html注释来存放ko if:,然后使用绑定到html ko foreach的{​​{1}},但设法让嵌套错误。以下是该问题的示例:

<div>

在这个简单的例子中很容易看出问题是什么,但在更大的html块中,发现错误要困难得多。我最终使用html注释来结束每个敲除绑定,例如<!-- ko if: isGuestCheckout() --> <div data-bind="foreach: formSection()"> <!-- /ko> Simple malformed knockout</div> ,这似乎效率低下。

是否有人知道如何验证敲除数据绑定是否正确嵌套?

1 个答案:

答案 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可观察性,以防我再次需要它。

我希望这有帮助! : - )