How do I prevent <span> element from getting created if certain property in $root is null?

Question

I display some text in a <span> element which looks like this

<span data-bind="text: $root.participants()[_propkey].Currency"></span>

When root.participants()[_propkey].Currency is null, I get an empty space on page.

How do I prevent this span from getting created if root.participants()[_propkey].Currency is null

Answer 1

you can use virtual elements and the if binding to achieve what you're after

var vm = {
  Currency : ko.observable()
};

ko.applyBindings(vm);

span {background-color: cornflowerblue}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
Currency span 
<!-- ko if: Currency -->
<span data-bind="text: Currency"></span>
<!-- /ko -->
is here
<br />

Test: <input data-bind="textInput: Currency">