Skip to content

HandlebarsJS.md

Latest commit

 

History

History
100 lines (79 loc) · 2.72 KB

HandlebarsJS.md

File metadata and controls

100 lines (79 loc) · 2.72 KB

HandlebarsJS

See the HandlebarsJS documentation for their available built in helpers.

Be sure to check out the Propeller Helpers documentation for custom Airship CMS helpers such as #sort_list.

The following are some examples of using built in HandlebarsJS helpers to render Airship CMS content:

{{#each}}

This is used to iterate over lists of items, which are notated with [list] when rendering {{{help}}} on any template page.

Example Markup:

{{#each items}}
<a href="{{slug}}"><h1>{{fields.name}}</h1></a>
{{/each}}

Example Output:

<a href="/mammals/view/anteater"><h1>Anteater</h1></a>
<a href="/mammals/view/anteater"><h1>Bobcat</h1></a>
<a href="/mammals/view/anteater"><h1>Camel</h1></a>

See the HandlebarsJS #each documentation for more information.

{{#if}}

This is used to conditionally render elements if the given value is truthy. It can also be used in combination with {{else}} to render elements when the value is falsey.

Example Markup:

<div>
  {{#if fields.show_image}}
    <h3>Hedgehog</h3>
    {{#each fields.animal_image}}
      <img src="{{url}}" alt="">
    {{/each}}
  {{else}}
    <h3>Sorry! No image for this animal.</h3>
  {{/if}}
</div>

Example Output if show_image was checked:

<div>
    <h3>Hedgehog</h3>
    <img src="http://res.cloudinary.com/airship/image/upload/v1494989137/media/hedgietest_rpaxih.jpg" alt="">
</div>

Example Output if show_image was not checked:

<div>
    <h3>Sorry! No image for this animal.</h3>
</div>

See the HandlebarsJS #if documentation for more information.

{{#unless}}

This is used to conditionally render elements if the given value is falsey.

Example Markup:

{{#each items}}{{#unless fields.show_image}}
<p>Sorry! No image for this animal.</p>
{{/unless}}{{/each}}

Example Output only if show_image was not checked:

<p>Sorry! No image for this animal.</p>

See the HandlebarsJS #unless documentation for more information.

{{#if @first}}

This pulls just the first item in a list. This is especially useful when getting the FIRST item in a collection, or the FIRST item in a list of images.

Example Markup:

{{#each items}}
  {{#if @first}}
  <div class="item"">
    <h3>aerostat_collection.public_path: "{{aerostat_collection.public_path}}"</h3>
  </div>
  {{/if}}
{{/each}}

Example Output:

<div class="item"">
  <h3>102</h3>
</div>