Data Binding

Data binding occurs automatically when you use either of the methods component.getTemplate() or component.getSubTemplate()

Valid bind options

<!-- text
<div>{{ placeholder }}</div>

<!-- click events -->
<div data-bind-click="function"></div>

<!-- after the template has rendered, eg to calculate styles -->
<div data-bind-load="function"></div>

<!-- a repeating block -->
<ul data-bind-for="arrayOfObjects">
    <!-- repeated for each object in arrayOfObjects -->
    <!-- the repeating element should be a SINGLE html entitity - although that can have children -->
    <li>
        <div></div>
    </li>
</ul>

<!-- logical, the root block is removed from the DOM if false -->
<div data-bind-if="is({{ obj.property }},aStringRepresentation)"></div>
OR
<div data-bind-if="not({{ obj.property }},aStringRepresentation)"></div>

<!-- a html property / attribute -->
<a data-bind-prop="href:{{ linktext }}">Link</a>
OR
<button data-bind-prop="disabled:{{ truthy || falsey }}">Click</button>
ETC

Data

The data passed to be bound to the template can either be set at the time the method is called or if omitted the component is passed.

Example

Given the template:

<h1>{{ dataStore.title }}</h1>
<div>
    // component contents
</div>

And the component:

class Example extends Component {
    dataStore.title = "Example";
    constructor() {
        // uses the default name for the template - which is "content"
        super("Components\example\example-template.html"); 
    }
    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>Example</h1>
<div>
    // component contents
</div>