Binds a function that decides whether an element renders at all. The function receives the template item and returns a boolean, the element (and everything inside it) is left out of the DOM entirely when it returns false, not just hidden with CSS.
false
The value is a data-key, not an expression, resolved through the current context the same way value resolves a data-key. Inside a repeat, that means the function can live on the controller and still read the current item, via templateItem.context, no globals required.
templateItem.context
Three radio options and a heading that switches based on which is selected. This is where else-if and else come in, chained the same way as a JavaScript if/else.
<div b-context="demo.if"> <label><input name="option" type="radio" b-bind="value" b-type="number" value="1" /> option 1 </label> <label><input name="option" type="radio" b-bind="value" b-type="number" value="2" /> option 2 </label> <label><input name="option" type="radio" b-bind="value" b-type="number" value="3" /> option 3 </label> <h4 b-if="isOption1">The selected option is 1.</h4> <h4 b-else-if="isOption2">The selected option is 2.</h4> <h4 b-else>The selected option is something else.</h4> </div>
$bindary.appData.demo.if = { value: 1 }; ctrl.isOption1 = (templateItem) => templateItem.context.value === 1; ctrl.isOption2 = (templateItem) => templateItem.context.value === 2;
else-if and else chain directly after if. For showing or hiding an element based on whether a value is simply filled in, rather than an arbitrary condition, hasValue is usually the shorter fit.
if