For Loops

Providing your data has an array of objects, these can be bound to a repeating section of the template using the syntax data-bind-for="variableName"

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>{{ name }}</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</li>
    <li>Indigo Montana</li>
    <li>Buttercup</li>
    <li>Miricle Max</li>
</ul>

Options

There are times when you might want to have access to parent data structures inside event handlers bound in a for loop. If you want access to this you have to specify it when you bind the loop. This is done using the pipe syntax and the value includeParent

<ul data-bind-for="dataStore.characters|includeParent">
    <li data-bind-click="characterClicked">{{ name }}</li>
</ul>

This would effect the data passed to the click handler, assuming the first one "westly" is clicked.

    private characterClicked(src: JSPAEvent): void {
        // without `|includeParent`
        src.data = { name: "Westly" }

        // with `|includeParent`
        src.data = { 
            name: "Westly", 
            JSPA: { 
                array: "characters", 
                index: 0, 
                parent: { 
                    characters: [
                        { name: "Westly"},
                        { name: "Indigo Montana"},
                        { name: "Buttercup"},
                        { name: "Miricle Max"}
                    ]
                }
            }
        }
    }