{% include spec-header.html %}

Template Binding extends the <template> element with new attributes for binding data:

1. bind
2. repeat
3. if
4. ref

{% raw %} Creates a single instance with {{ bindings }} when singleton model data is provided. {% endraw %}

{% raw %} Creates an instance with {{ bindings }} for every element in the array collection. {% endraw %}

Named scopes:

{% raw %} {{user.name}} {% endraw %}

Indexing:

{% raw %} {{ i }}:{{ j }}. {{ value }} {% endraw %}

{% raw %} Binds if and only if conditionalValue is truthy.

<template if="{{ conditionalValue }}">
  Binds if and only if conditionalValue is truthy. (same as *bind if*)
</template>

<template repeat if="{{ conditionalValue }}">
  Repeat if and only if conditionalValue is truthy.
</template>

{% endraw %}

{% raw %} Used by any template which refers to this one by the ref attribute

<template bind ref="myTemplate">
  When creating an instance, the content of this template will be ignored,
  and the content of #myTemplate is used instead.
</template>

{% endraw %}

Setting data model on the template causes any bind, repeat or if attribute directive to begin acting:

document.querySelector('template').model = {...};

Node.unbind(<property>) can be used to unbind a property. For example, to unbind a model set using the bind attribute, call template.unbind('bind'):

{% raw %} test Hello, {{who}} - {{what}}

<script>
  var t = document.querySelector('#greeting');
  var model = {
    salutations: { what: 'GoodBye', who: 'Imperative' }
  };
  t.model = model;
    
  function removeGo() {
    t.unbind('bind');
  }
</script>

{% endraw %}

Please refer to the HowTo examples.