Built-in Variables

Contents of this document were more or less copied from here http://handlebarsjs.com/reference.html. The resulting document is tailored to our implmentation.

• @root
• @first
• @last
• @index
• @key
• this

---

@root

@root returns the initial context. You can use this, when you're nested inside block helpers, to gain access to objects in the original context.

Context

{
    "value": "test",
    "someObject": {
        "id": 1,
        "name": "object"
    }
}

Usage

<div>
    <span>{{value}}</span>
    <ul>
        {{#with someObject}}
            <li>{{name}}</li>
            <li>{{@root.value}}</li>
        {{/with}}
    </ul>
</div>

Result

<div>
    <span>test</span>
    <ul>
        <li>object</li>
        <li>test</li>
    </ul>
</div>

---

@first

@first will return true if the current iteration of a loop is the first.

Context

{
    "array": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

Usage

<ul>
    {{#each array}}
        <li>
            <span>{{id}}: </span>
            {{#if @first}}
                <span>First</span>
            {{else}}
                <span>Not First</span>
            {{/if}}
        </li>
    {{/each}}
</ul>

Result

<ul>
    <li>
        <span>1: </span>
        <span>First</span>
    </li>
    <li>
        <span>2: </span>
        <span>Not First</span>
    </li>
    <li>
        <span>3: </span>
        <span>Not First</span>
    </li>
</ul>

---

@last

@last will return true if the current iteration of a loop is the first.

Context

{
    "array": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

Usage

<ul>
    {{#each array}}
        <li>
            <span>{{id}}: </span>
            {{#if @last}}
                <span>Last</span>
            {{else}}
                <span>Not Last</span>
            {{/if}}
        </li>
    {{/each}}
</ul>

Result

<ul>
    <li>
        <span>1: </span>
        <span>Not Last</span>
    </li>
    <li>
        <span>2: </span>
        <span>Not Last</span>
    </li>
    <li>
        <span>3: </span>
        <span>Last</span>
    </li>
</ul>

---

@index

@index will return the current index of the array when iterating over a loop.

Context

{
    "array": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}

Usage

<ul>
    {{#each array}}
        <li>
            <span>{{id}}: </span>
            <span>{{@index}}</span>
        </li>
    {{/each}}
</ul>

Result

<ul>
    <li>
        <span>1: </span>
        <span>0</span>
    </li>
    <li>
        <span>2: </span>
        <span>1</span>
    </li>
    <li>
        <span>3: </span>
        <span>2</span>
    </li>
</ul>

---

@key

@key returns the property name of the current context. You'd typically use this when looping over an object.

Context

{
    "someObject": {
        "id": 1,
        "name": "object"
    }
}

Usage

<ul>
    {{#each someObject}}
        <li>{{@key}}</li>
    {{/each}}
</ul>

Result

<ul>
    <li>id</li>
    <li>name</li>
</ul>

---

this

this returns the current context. You can use it to explore the current path or to return the current value of the current context.

Context

{
    "value": "test",
    "someObject": {
        "id": 1,
        "name": "object"
    },
    "array": [
        1,
        2,
        3
    ]
}

1. Path Exploration

   Usage

   <div>
       <span>{{value}}</span>
       <ul>
           {{#with someObject}}
               <li>{{name}}</li>
               <li>{{this/../value}}</li>
           {{/with}}
       </ul>
   </div>
   

   Result

   <div>
       <span>test</span>
       <ul>
           <li>object</li>
           <li>test</li>
       </ul>
   </div>
   

2. Array Context

   Usage

   <ul>
       {{#each array}}
           <li>{{this}}</li>
       {{/each}}
   </ul>
   

   Result

   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   

3. Object Context

   Usage

   <ul>
       {{#each someObject}}
           <li>{{this}}</li>
       {{/each}}
   </ul>
   

   Result

   <ul>
       <li>1</li>
       <li>object</li>
   </ul>