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

Posted 2023-05-07

【中文标题】在具有布尔值的 KnockoutJS 中显示隐藏 div 并应用 css 规则

【英文标题】：Show hide div and apply css rule in KnockoutJS with boolean value

【发布时间】：2015-10-30 00:16:43

【问题描述】：

我正在尝试使用 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;
            );

【问题讨论】：

@segFault 还是一样

【参考方案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 调用，并在它返回时更新一个可观察值。然后在计算中返回该 observable 属性。

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

【讨论】：

尝试了您的两个示例，但均无效，不过感谢您的帮助

第一个例子是有问题的，但第二个应该可以工作，我会使用 Chrome Knockout 调试器（如果你使用的是 chrome）来检查绑定并查看 chrome.google.com/webstore/detail/knockoutjs-context-debugg/… 的绑定值是什么

在第二个例子中，HasDiscount i.gyazo.com/314c9e789f3ab2939f68b0787275882c.png没有定义

如果实际触发了 ajax 请求，它应该有一个值。我对我的第二个例子做了一个小改动（意识到计算是多余的）。我会检查 ajax 请求是否正在触发。在我看来不是

实际上第二个例子没有触发，你是对的