JSFiddle - React, Tailwind, and code Playground
HTML
<button data-bind="click:toggleAltLocLength">Toggle</button><br />
'p' element:<br />
<p>
<!-- ko if: SearchTerms.Query -->
SearchTerms.Query<br />
<!-- /ko -->
<!-- ko if: SearchTerms.Names -->
--SearchTerms.Names<br />
<!-- /ko -->
<!-- ko if: SearchTerms.Location && AlternativeLocations && AlternativeLocations.length() -->
--SearchTerms.Location && AlternativeLocations && AlternativeLocations.length()<br />
<!-- ko if: AlternativeLocations && AlternativeLocations.length() > 1 -->
----AlternativeLocations && AlternativeLocations.length() > 1<br />
<!-- /ko -->
<!-- /ko -->
<!-- ko if: SearchTerms.Location && (!AlternativeLocations || AlternativeLocations.length() == 0) -->
--SearchTerms.Location && (!AlternativeLocations || AlternativeLocations.length() == 0)
<!-- /ko -->
</p>
<hr />
'div' element:<br />
<div>
<!-- ko if: SearchTerms.Query -->
SearchTerms.Query<br />
<!-- /ko -->
<!-- ko if: SearchTerms.Names -->
--SearchTerms.Names<br />
<!-- /ko -->
<!-- ko if: SearchTerms.Location && AlternativeLocations && AlternativeLocations.length() -->
--SearchTerms.Location && AlternativeLocations && AlternativeLocations.length()<br />
<!-- ko if: AlternativeLocations && AlternativeLocations.length() > 1 -->
----AlternativeLocations && AlternativeLocations.length() > 1<br />
<!-- /ko -->
<!-- /ko -->
<!-- ko if: SearchTerms.Location && (!AlternativeLocations || AlternativeLocations.length() == 0) -->
--SearchTerms.Location && (!AlternativeLocations || AlternativeLocations.length() == 0)
<!-- /ko -->
</div>
JavaScript
var vm = {
SearchTerms: {
Query: true,
Names: true,
Location: true,
},
AlternativeLocations: {
length: ko.observable(2)
}
};
vm.toggleAltLocLength = function() {
var val = vm.AlternativeLocations.length();
vm.AlternativeLocations.length(val === 2 ? 0 : 2);
};
ko.applyBindings(vm);