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.