javascript - 在 KnockoutJS 中使用 bool 值显示隐藏 div 并应用 css 规则

Question

我正在尝试使用 KnockoutJS 执行两个动态操作。

首先，如果值为 true，我想应用特定的 css 规则，并且我想再次切换表行的可见性，检查相同的值，如果为 true，则显示 div。

这就是我所拥有的:

<th class="name" data-bind="css: { text_linethrough: !$root.HasDiscount() }, text: '$' + (Price)"></th>

<tr data-bind="visible: $root.HasDiscount(), css: { package5_Discount_Background: Name == 'Cady Kids Package 5' }">
                                        <th class="name" style="width: 60% !important;"><span></span>&nbsp;
                                        </th>
                                        <th class="name">
                                            PRE-ORDER PRICE:&nbsp;
                                        </th>
                                        <th class="name" data-bind="text: '$' + (Price - 10)"></th>
                                    </tr>

因此，如果 $root.HasDiscount() 返回 true，那么我期望 css 都将被应用，并且表行将可见。

尽管该值是 true，但我仍然没有获得正确的 css 规则，并且该行仍然不可见。

这就是 HasDiscount 值的创建方式:

t.HasDiscount = ko.computed(function() {
                $.ajax({
                    type: "POST",
                    url: "/webservices/Shopping.asmx/checkShowDiscountedPrice",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (i) {
                        if (i.d) {
                            return i.d;
                        } else {
                            return false;
                        }
                    },
                    error: function (n) {
                        u(n);
                    }
                });

                return false;
            });

Answer 1

您不应该像这样在计算内部进行 ajax 调用。这是一个异步调用，这意味着该函数在对服务器的调用进行往返之前返回，导致最终触发的 return false 始终触发。

你可以试试

t.HasDiscount = ko.computed(function() {
                $.ajax({
                    type: "POST",
                    url: "/webservices/Shopping.asmx/checkShowDiscountedPrice",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: false,
                    success: function (i) {
                        if (i.d) {
                            return i.d;
                        } else {
                            return false;
                        }
                    },
                    error: function (n) {
                        u(n);
                    }
                });

                return false;
            });

但我怀疑这是否是最佳实践

我会单独进行ajax调用，并在返回时更新可观察的值。然后在计算中返回该可观察属性。

function someOtherFunction(){
 $.ajax({
                    type: "POST",
                    url: "/webservices/Shopping.asmx/checkShowDiscountedPrice",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (i) {
                        if (i.d) {
                            t.HasDiscount (i.d);
                        } else {
                            t.HasDiscount (false);
                        }
                    },
                    error: function (n) {
                        u(n);
                    }
                });
}

t.HasDiscount = ko.observable(false);