component

Marks an element as a component. Each one gets its own object instance and that instance becomes the default context for everything inside it, so two components of the same type share markup while holding entirely different data.

Registering

The attribute value is the component's name. Register that name with an initiator function and Bindary calls it when an element with that name renders. Whatever it returns is the instance.

$bindary.addComponent('itemList', function (templateItem)
{
    return new ItemList(templateItem);
});

There is no required base class and no interface to implement. A class, a custom element, a plain object from a factory function: anything you return becomes the context and the bindings inside the component resolve against its properties.

Binding inside a component

Inside the component, keys resolve against the instance. Two prefixes address it explicitly: $component for the component instance and $context for whatever object the current element is scoped to, which inside a repeat is the item rather than the component.

<div b-attributes="id = id, class = className" b-post-render="$component.postRender">
    <ul>
        <li b-repeat="data" b-value="$value" b-on-click="$component.click"></li>
    </ul>
</div>

data, id and className are properties of the instance. Nothing here names a data container and nothing needs a unique id, which is what makes the same markup reusable.

Giving an instance its data

load fires once the content is in and before it renders, with templateItem.context being the instance. This is where each component gets what makes it different from its siblings.

ctrl.initItemList = (templateItem) =>
{
    let component = templateItem.context;

    component.data = ['January', 'February', 'March'];
    component.events.onClick.add(function (item)
    {
        console.log(item.element.textContent + ' selected');
    });
};

Settings that belong to the markup rather than to the data go in a data-settings attribute, which the initiator reads. Expressions work there, so inside a repeat each instance can be given a distinct id.

<div b-repeat="lists">
    <div b-include="#listTemplate" b-component="itemList"
        b-load="$bindary.controller.initItemList" b-observe="data"
        data-settings='"id":"list_{{$key}}"'></div>
</div>

Letting the page decide the markup

A component can accept an includable from the page and use it for its items. The component then knows how its list behaves without knowing what a row looks like.

<span id="itemTemplate" b-includable b-value="$value"></span>

<item-list include-id="itemTemplate" b-component="itemList"></item-list>

Inside the component, the item element includes by that id: b-include="includeId", resolving the id from its own property rather than hard-coding it.

The simplest form

A component does not have to live anywhere special. Mark markup already on the page as includable, include it and put the component attribute on the including element. Bindary calls the initiator and the included markup binds against the instance it returns.

Multiple instances of the same includable template need a repeat around them, one instance per item, rather than several separate b-include elements written out by hand.

The including element does not have a context of its own yet when the initiator runs, it is about to receive the component's context instead. Read the repeat item from templateItem.parent.context, one level up, not from templateItem.context. Anything the component itself needs to observe for changes has to be an object, not a bare value, wrap it, {{ count: 0 }} rather than plain count: 0, since b-observe watches an object's properties, not a primitive on its own.

<div id="counterTemplate" b-includable>
    <b b-value="label"></b>: <span b-value="counter.count"></span>
    <a href="#" b-on-click="$component.increment">more</a>
</div>

<div b-repeat="counters">
    <div b-include="#counterTemplate" b-component="counter" b-observe="counter"></div>
</div>

$bindary.appData.demo.component.counters = [
    { label: 'Apples' },
    { label: 'Oranges' }
];

$bindary.addComponent('counter', function (templateItem)
{
    return {
        label: templateItem.parent.context.label, // the repeat item, one level up
        counter: { count: 0 },                    // observed property must live on an object
        increment: function (item, e) { e.preventDefault(); ++this.counter.count; }
    };
});

Result

: more

Two instances, one template, no file and no class. Each holds its own counter.count because each got its own object from the initiator. That is the whole mechanism; everything else is about where the component comes from.