Docs

Everything You Need to Know

Templates

Intro

Templates enable views to output data to your app. Templates are markup with delimiters to indicate data end points to interpolate while rendering.

To interpolate a data variable, use: {= data }. To process arbitrary JavaScript in your template, use: {{ alert("hi!") }}. Generally you shouldn't use JavaScript in your templates unless you need to output content conditionally.

You have three options for making templates: using template tags, script tags or using inline markup. Script and template tags will not show on the page. An inline template will, but by putting the class cloak on its parent, it will not show up until rendered.

With script tag:

<ul class="list" id='defaultObjectTemplateScript'>
  <script type='text/x-template'>
    <li>
      <h3>{= data.firstName } {= data.lastName }</h3>
    </li>
  </script>
<ul>

With template tag:

<ul class="list" id='defaultObjectTemplateScript'>
  <template>
    <li>
      <h3>{= data.firstName } {= data.lastName }</h3>
    </li>
  </template>
<ul>

Defined in markup, using cloak class:

<ul class="list" id='defaultObjectTemplateScript' class='cloak'>
  <li>
    <h3>{= data.firstName } {= data.lastName }</h3>
  </li>
<ul>

Defining a template in the markup is the most convenient and straightforward way of putting templates in the document. However, you can also define a template directly in the view initialization itself. For more information about how to define a template in a view, please read the View documentation. There is no difference in functionality between having a template in the markup or view. In both cases ChocolateChip-UI will store the template in the View object for rendering purposes.

Templates are consummed by views. That means that when the view loads, it looks for the template, extracts it from the parent element and stores it on the view object. The next time the view renders, it will find the template stored on itself and use it.

You can output sequential numbering using $.view.index in your template markup. This value will increase with each iteration. You can also set a what value you want the count to start.

<ul class="list" id='defaultObjectTemplateScript'>
  <template>
    <li>
      <h3>{= $.view.index }: {= data.firstName } {= data.lastName }</h3>
    </li>
  </template>
<ul>