Live Binding

Live binding lets you focus on changing data and state without having to worry about also updating the DOM to reflect those changes.

In this example, we have a simple user welcome screen.

<h1>Welcome {{user}}!</h1>
<p>
    {{#if messages}}
        You have {{messages}} new messages.
    {{else}}
        You no messages.
    {{/messages}}
</p>

var data = new DefineMap({
    user: 'Tina Fey',
    messages: 0
});

var template = stache( document.getElementById("template").innerHTML );
var frag = template( data );
document.body.appendChild( frag );

The template evaluates the messages and adds the hooks for live binding automatically. Since we have no message it will render:

<h1>Welcome Tina Fey!</h1>
<p>You no messages.</p>

Now say we have a request that updates the messages attribute to have 5 messages.

data.message = 5;

After the template receives this update, it will automatically update the paragraph tag to reflect the new value.

<p>You have 5 new message.</p>

For more information visit the can-define/map/map documentation.

Binding between components

If you are looking for information on bindings between components like this:

(event)="key()" for event binding.
{prop}="key" for one-way binding to a child.
{^prop}="key" for one-way binding to a parent.
{(prop)}="key" for two-way binding.

See can-stache-bindings.