显示隐藏 div 并在 KnockoutJS 中使用布尔值应用 css 规则

Question

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

首先，如果值为真，我想应用特定的 css 规则，我还想再次切换 table 行的可见性，检查相同的值，如果为真，则显示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() returns 为真，那么我预计 css 将被应用，并且 table 行将被应用可见。

虽然该值为 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 调用。这是一个异步调用，这意味着函数 returns 在对服务器的调用进行往返之前导致 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 调用，当它 return 更新一个可观察值时。然后 return observable 属性 in the computed.

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);

显示隐藏 div 并在 KnockoutJS 中使用布尔值应用 css 规则

Show hide div and apply css rule in KnockoutJS with boolean value

javascript

jquery

knockout-2.0

knockout.js