Question

我目前正在创建一个包含保存/取消/删除的页脚，具体取决于用户所在的位置。现在我不想在不需要时显示/渲染删除按钮。如何使用KnockoutJS（可观察）中的变量作为三元组中的运算符来实现此目的？

当前代码无法正常工作但无论如何都在下方。

<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>，其中包含其他内容。它隐藏了按钮，但在页脚中留下了一个大洞。这就是为什么我试图解决这个问题，因为如果不需要的话，我根本不加载它来进行渲染。

任何帮助都将不胜感激。

Answer 1

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

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

使用可见：绑定。

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

isEditingProduct需要是视图模型的属性。

Answer 2

您可以使用visible或if绑定：

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

阅读有关这些绑定的文档：

http://knockoutjs.com/documentation/if-binding.html

http://knockoutjs.com/documentation/visible-binding.html

Answer 3

不确定您“isEditingProduct”的定义位置，但您不能简单地在JavaScript中引用View模型的一部分而不完全限定它。而是尝试：

myViewModel.isEditingProducts = true;

此外，脚本块的位置令人困惑。它不应该在<li />标记之间。该脚本不一定会在那时执行（因为浏览器正在解析您的标记）。

如何使用带有数据绑定变量的内联三元？

3 个答案: