如何将内联三元与数据绑定变量一起使用？答案

【问题标题】：How to use inline ternary with data-bind variable?如何将内联三元与数据绑定变量一起使用？
【发布时间】：2012-11-12 15:55:12
【问题描述】：

我目前正在使用保存/取消/删除创建页脚，具体取决于用户所在的位置。现在我试图在不需要时不显示/渲染删除按钮。如何使用来自 KnockoutJS (observable) 的变量作为三元中的运算符来实现这一点？

当前代码不能正常工作，但无论如何都在下面。

<li><a href="#" data-icon="back" data-theme="b" data-bind="click: cancelProduct">@(Global.ButtonCancel)</a></li>
<script>
    var button = "<li><a href=\"#\" data-icon=\"delete\" data-theme=\"b\" data-bind=\"click: deleteProduct\">@(Global.ButtonDelete)</a></li>";
    isEditingProduct ? button : false;
</script>
<li><a href="#" data-icon="check" data-theme="b" data-bind="click: saveProduct">@(Global.ButtonSave)</a></li>

我不断收到的错误是“isEditingProduct”未定义。当我内联（在脚本之外）使用它时，直接<li data-bind="isEditingProduct" ></li> 与它里面的其他东西一起工作。它隐藏了按钮，但在页脚留下了一个大洞。这就是为什么我试图通过不加载它来解决它，如果它还不需要的话。

任何帮助将不胜感激。

【问题讨论】：

我希望人们也能真正回答这个问题。

标签： javascript jquery jquery-mobile knockout.js

【解决方案1】：

看看你的代码，我很困惑。

不知道为什么你觉得你需要一个三元来隐藏/取消隐藏元素。

使用 visible: 绑定。

<li data-bind="visible: isEditingProduct"></li>

isEditingProduct 必须是您的视图模型上的一个属性。

【讨论】：

我试过这个，但是它在删除按钮“不可见”的
元素之间留下了一个空白空间。它不是，而是。 isEditingProduct 是 viewModel 上的一个属性，需要时设置为 true/false。

<li><a href="#" data-icon="back" data-theme="b" data-bind="click: cancelProduct">@(Global.ButtonCancel)</a></li> <li><a href="#" data-icon="delete" data-theme="b" data-bind="click: deleteProduct, if: isEditingProduct">@(Global.ButtonDelete)</a></li> <li><a href="#" data-icon="check" data-theme="b" data-bind="click: saveProduct">@(Global.ButtonSave)</a></li>