Control Flow

If Statement

Here is a simple if statement:

<html>
  <body>
    {{if user.isCool}}
      <div>{{user.name}} is cool</div>
    {{/if}}
  </body>
</html>

You can use an else:

<html>
  <body>
    {{if user.isCool}}
      <div>{{user.name}} is cool</div>
    {{else}}
      <div>{{user.name}} is not cool</div>
    {{/if}}
  </body>
</html>

For Statement

Here is a simple for statement:

<div>
  {{for user in users}}
    <div>Hello {{user.name]}</div>
  {{/for}}
</div>

You can expose the index of the current iteration by following the syntax {{for element, index in collection}}):

<ul>
{{for user, index in users}}
<li>{{index}} - Hello {{user.name}}</li>
{{/for}}
</ul>

Inside of the for, we expose some helpers: isFirst, isLast, isNotLast, isOdd, isEven. Here how to use them:

<div>
  {{for user in users}}
    <span>{{user.name}}</span>
    <span>isFirst: {{user.isFirst}}</span>
    <span>isLast: {{user.isLast}}</span>
    <span>isNotLast: {{user.isNotLast}}</span>
    <span>isOdd: {{user.isOdd}}</span>
    <span>isEven: {{user.isEven}}</span>
  {{/for}}
</div>

Of course, you can use these helpers inside ifs:

<div>
  {{for user in users}}
    {{if user.isOdd }}
      <span clas="red">{{user.name]} </span>
    {{else}}
      <span class="white">{{user.name}}</span>
    {{/if}}
  {{/for}}
</div>

results matching ""

    No results matching ""