Docs

Everything You Need to Know

Templates

Intro

Truck Chassis

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>

Without script tag, using cloak class:

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

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>