将可见参数绑定到 Knockout 中的“或”语句答案

【问题标题】：Binding a visible parameter to an 'or' statement in Knockout将可见参数绑定到 Knockout 中的“或”语句
【发布时间】：2012-01-10 12:45:01
【问题描述】：

当两个条件之一为真时，我想将可见属性绑定为真。类似于以下内容

 <tr data-bind="visible: active || $parent.displayDeactive">....</tr>

我的代码在我执行一个或其他绑定时有效，但在我放置 || 时无效在那里。我还没有找到任何文档说我可以在这个绑定中放置任何逻辑，但是如果我不能直接这样做，那么最好的方法是什么，因为我正在绑定模板的一个属性和 $ 的一个对象父视图模型。

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

如果您在表达式中使用可观察对象的值，那么您需要将它们作为函数引用。所以，如果 active 和 displayDeactive 是可观察的，你会这样做：

data-bind="visible: active() || $parent.displayDeactive()"

有几种方法可以将其移动到视图模型中，您可以：

在子节点上创建一个计算的 observable（函数需要能够引用父节点）
在父级上创建一个函数，该函数接收子级并返回您的值（绑定在计算的 observable 中执行，因此当它访问的任何 observable 发生更改时，它将再次触发）
在子节点上创建一个接收父节点并返回值的函数（与上述相同）

在此处绑定和在父级上使用函数的逻辑示例：http://jsfiddle.net/rniemeyer/f6ZgH/

【讨论】：

谢谢，我知道这会很简单。感谢您在 Knockout 上所做的所有工作。我当然很感激。

【解决方案2】：

在 observables 之后添加括号，因为您正在评估它们。

<input type="checkbox" data-bind="checked:displayDeactive"> Display deactive</input>
<br/><br/>
<table>
    <tbody data-bind="foreach: products">
        <tr data-bind="visible: active() || $parent.displayDeactive()">
            <td><span data-bind="text:name"></span></td>
        </tr>
    </tbody>
</table>

你可以在这里找到完整的代码：http://jsfiddle.net/johnpapa/gsnUs/

您可以在评估表达式的模板项上使用计算属性（刚刚看到@RPNiemeyer 也对此做出了回应……我 +1 了）。

【讨论】：