我的视图模型不会根据 JSON 结果淘汰赛增加数字答案

【问题标题】：My viewmodel doesnt increment numbers depending on JSON result knockout我的视图模型不会根据 JSON 结果淘汰赛增加数字
【发布时间】：2016-06-14 22:55:10
【问题描述】：

我有以下 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 为 1，它会显示第一。但它不会增加数字。因此，如果有 2 个或 3 个等以无限循环结束。

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

【问题讨论】：

一种可能是在 ajax 请求返回承诺和 domainSearch.preOrderedDomains().length 更新之前，您的 DOM 已被绑定。另外，能否请您详细介绍一下“domainSearch”的意义，因为我在 viewmodel 中找不到它
domainSearch 用于启动上面所包含的 viewModel。因此，它会返回搜索结果，这些结果最终会出现在预购检查正在使用的会话中。
但是在将其更改为上述之后，它会启动一个无限循环，该循环只会不断增加计数器：/

标签： javascript json knockout.js

【解决方案1】：

您将.preOrdered div 可见性绑定到一个函数。不要那样做。相反，绑定到 observable 或计算 observable。

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

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

无论哪种情况，我都建议将其用于 hasPreorder 可观察对象并设置其值：

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，例如当它第一次加载时，或者在其他 observables 被触发订阅时。

【讨论】：