helpers /  HTML

Special Helpers Categories

HTML

{{br}}

Renders <br> elements in the output, based on the number given as a parameter. Not really recommended for general use, but it's here if you need it.

Parameters: Integer|Count, Optional

The number of br elements to render.

template.hbs 

{{br 5}}

renders to:

`<br><br><br><br><br>`

{{doctype}}

Easy way to add an uncommonly used doctype.

Default is HTML 5 (<!DOCTYPE html>) although this is probably only useful on projects that use anything besides HTML 5.

Template:

{{DOCTYPE 'svg 1.1'}}

Renders to:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Available doctypes:

HTML 5 (default) *
- {{doctype '5'}} | aliases: html, html5

XML
- <?xml version="1.0" encoding="utf-8" ?>
- {{doctype 'xml'}}

XHTML
- {{doctype 'basic'}}
- {{doctype 'strict'}}
- {{doctype 'transitional'}}
- {{doctype 'frameset'}}
- {{doctype '1.1'}} | aliases: 1.1, xhtml 1.1
- {{doctype 'mobile'}}

HTML 4.01
- {{doctype '4'}} | aliases: 4.01, 4.01 strict
- {{doctype '4.01 trans'}} *
- {{doctype '4.01 frameset'}}

SVG
- {{doctype 'svg'}} | aliases: svg, svg 1.1, svg1.1
- {{doctype 'svg 1.0'}} | aliases: svg 1.0, svg1.0, svg1

{{exticon}}

Generate the appropriate icon based on the extension of the given file.

Since this helper generates classes that are very specific, feel free to copy the code and use it as inspiration for your a helper that works for you.

Usage:

{{exticon 'file.png'}}
{{exticon 'file.pdf'}}
{{exticon 'file.doc'}}
{{exticon 'file.txt'}}
{{exticon 'file.csv'}}
{{exticon 'file'}}

Output:

<img src="img/img-icon.png"><i>file.png</i>
<img src="img/pdf-icon.png"><i>file.pdf</i>
<img src="img/word-icon.png"><i>file.doc</i>
<img src="img/txt-icon.png"><i>file.txt</i>
<img src="img/csv-icon.png"><i>file.csv</i>
<img src="img/other-icon.png"><i>file</i>

{{ol}}

Same as the ul helper but creates and ordered list. Returns <br> tags based on a count.

Parameters: Hash, HTML attributes, Optional

HTML attributes to use on the ol element.

Data:

collection = [
  name: 'Leela' 
  deliveries: 8021,
  name: 'Bender' 
  deliveries: 239,
  name: 'Fry' 
  deliveries: 1 
]

Template:

{{#ol collection class="deliveries-list"}}
  {{name}} - {{inflect deliveries "delivery" "deliveries" true}}
{{/ol}}

Output:

<ol class="deliveries-list">
  <li> Leela - 8021 deliveries </li>
  <li> Bender - 239 deliveries </li>
  <li> Fry - 1 delivery </li>
</ol>

{{ul}}

Creates an unordered list.

Parameters: Hash|HTML attributes, Optional

HTML attributes to use on the ul element.

Data:

collection = [
  name: 'Leela' 
  deliveries: 8021,
  name: 'Bender' 
  deliveries: 239,
  name: 'Fry' 
  deliveries: 1 
]

Template:

{{#ul collection class="deliveries-list"}}
  {{name}} - {{inflect deliveries "delivery" "deliveries" true}}
{{/ul}}

Output:

<ul class="deliveries-list">
  <li> Leela - 8021 deliveries </li>
  <li> Bender - 239 deliveries </li>
  <li> Fry - 1 delivery </li>
</ul>

See the template for this page →

Find an error? Let us know →