If Statements

If statements allow for blocks of the template to be included or excluded based on a boolean comparison between the data being bound and a static value. There should only be a single DOM node as a direct child of the element implimenting data-bind-if

Example

Given the template:

<h1>Loop Example</h1>
<!-- there should only be one direct child node of an element implimenting data-bind-for -->
<ul data-bind-for="dataStore.characters">
    <li data-bind-if="is({{ name }},Westly)">
        {{ name }} is Westly
    </li>
    <li data-bind-if="not({{ name }},Westly)">
        {{ name }} isn't Westly
    </li>

</ul>

And the component:

class Example extends Component {
    private dataStore.characters: string[] = [
        { name: "Westly"},
        { name: "Indigo Montana"},
        { name: "Buttercup"},
        { name: "Miricle Max"}
    ];

    constructor() {
        // uses the default name for the template - which is "content"
        super("Components\example\example-template.html"); 
    }
    public draw(args: any): Promise<JQuery> {
        return new Promise((resolve) => {
            // no data passed to be bound, so whole component used
            let $page = this.getTemplate("content");
            resolve($page);
        });
    }
}

The output would be:

<h1>Loop Example</h1>
<!-- there should only be one direct child node of an element implimenting data-bind-for -->
<ul data-bind-for="dataStore.characters">
    <li>Westly is Westly</li>
    <li>Indigo Montana isn't Westly</li>
    <li>Buttercup isn't Westly</li>
    <li>Miricle Max isn't Westly</li>
</ul>

Syntax

<node data-bind-if="[is|not]({{ value }},string)" />

is compares coerced values eg if(value==string) not compares the inverse of coerced values eg if(value!=string)