0

I'm currently creating a footer with Save/Cancel/Delete, depending on where the user is. Now I'm trying to not show/render the Delete button when it's not required. How to achieve this using a variable from KnockoutJS (observable) as the operator in a ternary?

Current code doesn't work properly but below anyway. 

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

The error i keep getting is that "isEditingProduct" is undefined. When i use it inline (outside the script), for a straight <li data-bind="isEditingProduct" ></li> with the other stuff inside it works. It hides the button, but leaves me with a gaping hole in the footer. Which is why I'm trying to get around it by not loading it in for rendering at all if it's not yet needed.

Any help would be appreciated.

4

3 回答 3

1

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

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

使用可见的：绑定。

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

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

于 2012-11-12T16:01:39.830 回答
0

不确定“isEditingProduct”是在哪里定义的，但是如果不完全限定它，就不能简单地在 JavaScript 中引用视图模型的一部分。而是尝试：

myViewModel.isEditingProducts = true;

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

于 2012-11-12T16:44:12.787 回答
0

You could use visible or if binding:

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

Read documentation about these bindings:

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

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

于 2012-11-12T16:01:07.270 回答