javascript - 我的 View 模型不会根据 JSON 结果 knockout 增加数字

Question

我有以下 JSON 对象:

Object {domainCount: 1, preOrderCode: "something"}

我在我的 viewModel 中这样调用它:

this.preOrderedDomains = ko.observableArray([]);
this.hasPreOrder = function(domainSearchResult, event) {
            var data = {
                'preOrderCode' : this.preOrderCode,
                'domainCount' : this.domainCount,
                }

            $.ajax('/ajax-check-preorder.do', { 
            data: data,
            type: "post", 
            dataType: 'json',
            success: function(result) {
                if (utils.getProperty('domainCount',result, true) ) {
                    self.preOrderedDomains.push(domainSearchResult);
                 }
                        console.log(result);

                }
            });
      return ko.utils.arrayFilter(self.preOrderedDomains(), function (domainCount) {
        return domainCount == domainSearchResult.domainCount;
    }).length;

    }

当您刷新页面时，它会检查是否有预订。如果有，它应该在 DOM 中显示以下内容:

<div class="preOrdered" data-bind="visible: $root.domainSearch.hasPreOrder($data)">
            <strong class="single_domain" data-bind="visible: $root.domainSearch.preOrderedDomains().length <= 1">
            <span class="update--domain" data-bind="text: domainSearch.preOrderedDomains().length"></span>&nbsp;<bean:message key="site.domain.search.selected.domain" />
            </strong>
            <strong class="multiple_domains" data-bind="visible: $root.domainSearch.preOrderedDomains().length >= 2">
            <span class="update--domain" data-bind="text: domainSearch.preOrderedDomains().length"></span>&nbsp;<bean:message key="site.domain.search.selected.domains" />
            </strong>
        </div>

当我重新加载时，如果domainCount 为一，它会显示第一。但它不会增加数字。因此，如果有 2 或 3 等，就会陷入无限循环。

有人知道我做错了什么吗？

Answer 1

您将 .preOrdered div 可见性绑定(bind)到函数。不要那样做。相反，绑定(bind)到可观察的或计算的可观察的。

问自己的第二件事:您是否同意最初显示的页面隐藏 div ，并且在 Ajax 请求完成后弹出？或者您想在完成之前显示任何内容吗？

在后一种情况下，您可能不应该在 success 处理程序中调用 ko.applyBindings。

无论哪种情况，我都建议对 hasPreorder observable 进行此操作并设置其值:

var self = this;

self.preOrderedDomains = ko.observableArray([]);
self.hasPreOrder = ko.observable(false);

self.updateHasPreorder = function(domainSearchResult, event) {
    var data = {
        'preOrderCode' : self.preOrderCode,
        'domainCount' : self.domainCount,
    };

    $.ajax('/ajax-check-preorder.do', { 
        data: data,
        type: "post", 
        dataType: 'json',
        success: function(result) {
            if (utils.getProperty('domainCount',result, true) ) {
                self.preOrderedDomains.push(domainSearchResult);
            }
            console.log(result);

            var hasPreorderNew = ko.utils.arrayFilter(self.preOrderedDomains(), function (domainCount) {
                return domainCount === domainSearchResult.domainCount;
            }).length

            self.hasPreorder(hasPreorderNew);
        }
    });
}

然后在应用程序中的适当时间调用 self.updateHasPreorder，例如当它第一次加载时，或者在其他可观察量的订阅被激发时。