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

user_13208200 0
Viewed 16

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

knockout.js razor
1 Answers

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

user_294670
Related