#

API Docs for: v2.11.1
Show: Inherited Protected Private Deprecated

# Ember.Templates.helpers Class

Module: ember-glimmer
Parent Module: ember

- Index
- Methods

## Item Index

### Methods

- action
- component
- concat
- debugger
- debugger
- each
- each-in
- get
- hash
- if
- if
- input
- link-to
- loc
- log
- mount
- mut
- outlet
- partial
- query-params
- readonly
- render
- textarea
- unbound
- unless
- with

## Methods

### `action`

() public

Defined in `packages/ember-glimmer/lib/helpers/action.js:21`

The `{{action}}` helper provides a way to pass triggers for behavior (usually just a function) between components, and into components from controllers.

### Passing functions with the action helper

There are three contexts an action helper can be used in. The first two contexts to discuss are attribute context, and Handlebars value context.

    {{! An example of attribute context }}
    <div onclick={{action "save"}}></div>
    {{! Examples of Handlebars value context }}
    {{input on-input=(action "save")}}
    {{yield (action "refreshData") andAnotherParam}}

In these contexts, the helper is called a "closure action" helper. Its behavior is simple: If passed a function name, read that function off the `actions` property of the current context. Once that function is read (or if a function was passed), create a closure over that function and any arguments. The resulting value of an action helper used this way is simply a function.

For example, in the attribute context:

    {{! An example of attribute context }}
    <div onclick={{action "save"}}></div>

The resulting template render logic would be:

    var div = document.createElement('div');
    var actionFunction = (function(context){
      return function() {
        return context.actions.save.apply(context, arguments);
      };
    })(context);
    div.onclick = actionFunction;

Thus when the div is clicked, the action on that context is called. Because the `actionFunction` is just a function, closure actions can be passed between components and still execute in the correct context.

Here is an example action handler on a component:

    export default Ember.Component.extend({
      actions: {
        save() {
          this.get('model').save();
        }
      }
    });

Actions are always looked up on the `actions` property of the current context. This avoids collisions in the naming of common actions, such as `destroy`. Two options can be passed to the `action` helper when it is used in this way.

- `target=someProperty` will look to `someProperty` instead of the current context for the `actions` hash. This can be useful when targetting a service for actions.
- `value="target.value"` will read the path `target.value` off the first argument to the action when it is called and rewrite the first argument to be that value. This is useful when attaching actions to event listeners.

### Invoking an action

Closure actions curry both their scope and any arguments. When invoked, any additional arguments are added to the already curried list. Actions should be invoked using the sendAction method. The first argument to `sendAction` is the action to be called, and additional arguments are passed to the action function. This has interesting properties combined with currying of arguments. For example:

    export default Ember.Component.extend({
      actions: {
        // Usage {{input on-input=(action (action 'setName' model) value="target.value")}}
        setName(model, name) {
          model.set('name', name);
        }
      }
    });

The first argument (`model`) was curried over, and the run-time argument (`event`) becomes a second argument. Action calls can be nested this way because each simply returns a function. Any function can be passed to the `{{action}}` helper, including other actions.

Actions invoked with `sendAction` have the same currying behavior as demonstrated with `on-input` above. For example:

    export default Ember.Component.extend({
      actions: {
        setName(model, name) {
          model.set('name', name);
        }
      }
    });

    {{my-input submit=(action 'setName' model)}}

    // app/components/my-component.js
    export default Ember.Component.extend({
      click() {
        // Note that model is not passed, it was curried in the template
        this.sendAction('submit', 'bob');
      }
    });

### Attaching actions to DOM elements

The third context of the `{{action}}` helper can be called "element space". For example:

    {{! An example of element space }}
    <div {{action "save"}}></div>

Used this way, the `{{action}}` helper provides a useful shortcut for registering an HTML element in a template for a single DOM event and forwarding that interaction to the template's context (controller or component). If the context of a template is a controller, actions used this way will bubble to routes when the controller does not implement the specified action. Once an action hits a route, it will bubble through the route hierarchy.

### Event Propagation

`{{action}}` helpers called in element space can control event bubbling. Note that the closure style actions cannot.

Events triggered through the action helper will automatically have `.preventDefault()` called on them. You do not need to do so in your event handlers. If you need to allow event propagation (to handle file inputs for example) you can supply the `preventDefault=false` option to the `{{action}}` helper:

    <div {{action "sayHello" preventDefault=false}}>
      <input type="file" />
      <input type="checkbox" />
    </div>

To disable bubbling, pass `bubbles=false` to the helper:

    <button {{action 'edit' post bubbles=false}}>Edit</button>

To disable bubbling with closure style actions you must create your own wrapper helper that makes use of `event.stopPropagation()`:

    <div onclick={{disable-bubbling (action "sayHello")}}>Hello</div>

    // app/helpers/disable-bubbling.js
    import Ember from 'ember';
    export function disableBubbling([action]) {
      return function(event) {
        event.stopPropagation();
        return action(event);
      };
    }
    export default Ember.Helper.helper(disableBubbling);

If you need the default handler to trigger you should either register your own event handler, or use event methods on your view class. See "Responding to Browser Events" in the documentation for Ember.View for more information.

### Specifying DOM event type

`{{action}}` helpers called in element space can specify an event type. By default the `{{action}}` helper registers for DOM `click` events. You can supply an `on` option to the helper to specify a different DOM event name:

    <div {{action "anActionName" on="doubleClick"}}>
      click me
    </div>

See "Event Names" for a list of acceptable DOM event names.

### Specifying whitelisted modifier keys

`{{action}}` helpers called in element space can specify modifier keys. By default the `{{action}}` helper will ignore click events with pressed modifier keys. You can supply an `allowedKeys` option to specify which keys should not be ignored.

    <div {{action "anActionName" allowedKeys="alt"}}>
      click me
    </div>

This way the action will fire when clicking with the alt key pressed down. Alternatively, supply "any" to the `allowedKeys` option to accept any combination of modifier keys.

    <div {{action "anActionName" allowedKeys="any"}}>
      click me with any key pressed
    </div>

### Specifying a Target

A `target` option can be provided to the helper to change which object will receive the method call. This option must be a path to an object, accessible in the current context:

    {{! app/templates/application.hbs }}
    <div {{action "anActionName" target=someService}}>
      click me
    </div>

    // app/controllers/application.js
    export default Ember.Controller.extend({
      someService: Ember.inject.service()
    });

### `component`

() public

Defined in `packages/ember-glimmer/lib/helpers/component.js:20`

Available since 1.11.0

The `{{component}}` helper lets you add instances of `Ember.Component` to a template. See Ember.Component for additional information on how a `Component` functions. `{{component}}`'s primary use is for cases where you want to dynamically change which type of component is rendered as the state of your application changes. This helper has three modes: inline, block, and nested.

### Inline Form

Given the following template:

    {{component infographicComponentName}}

And the following application code:

    export default Ember.Controller.extend({
      infographicComponentName: computed('isMarketOpen', {
        get() {
          if (this.get('isMarketOpen')) {
            return 'live-updating-chart';
          } else {
            return 'market-close-summary';
          }
        }
      })
    });

The `live-updating-chart` component will be appended when `isMarketOpen` is `true`, and the `market-close-summary` component will be appended when `isMarketOpen` is `false`. If the value changes while the app is running, the component will be automatically swapped out accordingly. Note: You should not use this helper when you are consistently rendering the same component. In that case, use standard component syntax, for example:

    {{live-updating-chart}}

### Block Form

Using the block form of this helper is similar to using the block form of a component. Given the following application template:

    {{#component infographicComponentName}}
      Last update: {{lastUpdateTimestamp}}
    {{/component}}

The following controller code:

    export default Ember.Controller.extend({
      lastUpdateTimestamp: computed(function() {
        return new Date();
      }),

      infographicComponentName: computed('isMarketOpen', {
        get() {
          if (this.get('isMarketOpen')) {
            return 'live-updating-chart';
          } else {
            return 'market-close-summary';
          }
        }
      })
    });

And the following component template:

    {{! chart }}
    {{yield}}

The `Last Update: {{lastUpdateTimestamp}}` will be rendered in place of the `{{yield}}`.

### Nested Usage

The `component` helper can be used to package a component path with initial attrs. The included attrs can then be merged during the final invocation. For example, given a `person-form` component with the following template:

    {{yield (hash
      nameInput=(component "my-input-component" value=model.name placeholder="First Name")
    )}}

When yielding the component via the `hash` helper, the component is invocked directly. See the following snippet:

    {{#person-form as |form|}}
      {{form.nameInput placeholder="Username"}}
    {{/person-form}}

Which outputs an input whose value is already bound to `model.name` and `placeholder` is "Username".

When yielding the component without the hash helper use the `component` helper. For example, below is a `full-name` component template:

    {{yield (component "my-input-component" value=model.name placeholder="Name")}}

    {{#full-name as |field|}}
      {{component field placeholder="Full name"}}
    {{/full-name}}

### `concat`

() public

Defined in `packages/ember-glimmer/lib/helpers/concat.js:9`

Available since 1.13.0

Concatenates the given arguments into a string.

Example:

    {{some-component name=(concat firstName " " lastName)}}

    {{! would pass name="<first name value> <last name value>" to the component}}

### `debugger`

() public

Provided by the ember-htmlbars module.

Defined in `packages/ember-glimmer/lib/helpers/debugger.js:15`

Execute the `debugger` statement in the current template's context.

    {{debugger}}

When using the debugger helper you will have access to a `get` function. This function retrieves values available in the context of the template. For example, if you're wondering why a value `{{foo}}` isn't rendering as expected within a template, you could place a `{{debugger}}` statement and, when the `debugger;` breakpoint is hit, you can attempt to retrieve this value:

    > get('foo')

`get` is also aware of block variables. So in this situation

    {{#each items as |item|}}
      {{debugger}}
    {{/each}}

You'll be able to get values from the current item:

    > get('item.name')

You can also access the context of the view to make sure it is the object that you expect:

    > context

### `debugger`

() public

Defined in `packages/ember-glimmer/lib/index.js:114`

Execute the `debugger` statement in the current template's context.

    {{debugger}}

When using the debugger helper you will have access to a `get` function. This function retrieves values available in the context of the template. For example, if you're wondering why a value `{{foo}}` isn't rendering as expected within a template, you could place a `{{debugger}}` statement and, when the `debugger;` breakpoint is hit, you can attempt to retrieve this value:

    > get('foo')

`get` is also aware of keywords. So in this situation

    {{#each items as |item|}}
      {{debugger}}
    {{/each}}

You'll be able to get values from the current item:

    > get('item.name')

You can also access the context of the view to make sure it is the object that you expect:

    > context

### `each`

() public

Defined in `packages/ember-glimmer/lib/helpers/each-in.js:7`

The `{{#each}}` helper loops over elements in a collection. It is an extension of the base Handlebars `{{#each}}` helper. The default behavior of `{{#each}}` is to yield its inner block once for every item in an array passing the item as the first block parameter.

    var developers = [{ name: 'Yehuda' },{ name: 'Tom' }, { name: 'Paul' }];

    {{#each developers key="name" as |person|}}
      {{person.name}}
      {{! this is whatever it was outside the #each }}
    {{/each}}

The same rules apply to arrays of primitives.

    var developerNames = ['Yehuda', 'Tom', 'Paul']

    {{#each developerNames key="@index" as |name|}}
      {{name}}
    {{/each}}

During iteration, the index of each item in the array is provided as a second block parameter.

    <ul>
      {{#each people as |person index|}}
        <li>Hello, {{person.name}}! You're number {{index}} in line</li>
      {{/each}}
    </ul>

### Specifying Keys

The `key` option is used to tell Ember how to determine if the array being iterated over with `{{#each}}` has changed between renders. By helping Ember detect that some elements in the array are the same, DOM elements can be re-used, significantly improving rendering speed.

For example, here's the `{{#each}}` helper with its `key` set to `id`:

    {{#each model key="id" as |item|}}
    {{/each}}

When this `{{#each}}` re-renders, Ember will match up the previously rendered items (and reorder the generated DOM elements) based on each item's `id` property. By default the item's own reference is used.

### {{else}} condition

`{{#each}}` can have a matching `{{else}}`. The contents of this block will render if the collection is empty.

    {{#each developers as |person|}}
      {{person.name}}
    {{else}}
      <p>Sorry, nobody is available for this task.</p>
    {{/each}}

### `each-in`

() public

Defined in `packages/ember-glimmer/lib/helpers/each-in.js:83`

Available since 2.1.0

The `{{each-in}}` helper loops over properties on an object.

For example, given a `user` object that looks like:

    {
      "name": "Shelly Sails",
      "age": 42
    }

This template would display all properties on the `user` object in a list:

    <ul>
    {{#each-in user as |key value|}}
      <li>{{key}}: {{value}}</li>
    {{/each-in}}
    </ul>

Outputting their name and age.

### `get`

() public

Defined in `packages/ember-glimmer/lib/helpers/get.js:16`

Available since 2.1.0

Dynamically look up a property on an object. The second argument to `{{get}}` should have a string value, although it can be bound.

For example, these two usages are equivilent:

    {{person.height}}
    {{get person "height"}}

If there were several facts about a person, the `{{get}}` helper can dynamically pick one:

    {{get person factName}}

For a more complex example, this template would allow the user to switch between showing the user's height and weight with a click:

    {{get person factName}}
    <button {{action (action (mut factName)) "height"}}>Show height</button>
    <button {{action (action (mut factName)) "weight"}}>Show weight</button>

The `{{get}}` helper can also respect mutable values itself. For example:

    {{input value=(mut (get person factName)) type="text"}}
    <button {{action (action (mut factName)) "height"}}>Show height</button>
    <button {{action (action (mut factName)) "weight"}}>Show weight</button>

Would allow the user to swap what fact is being displayed, and also edit that fact via a two-way mutable binding.

### `hash`

(

- `options`

)
Object public

Defined in `packages/ember-glimmer/lib/helpers/hash.js:6`

Use the `{{hash}}` helper to create a hash to pass as an option to your components. This is specially useful for contextual components where you can just yield a hash:

    {{yield (hash
       name='Sarah'
       title=office
    )}}

Would result in an object such as:

    { name: 'Sarah', title: this.get('office') }

Where the `title` is bound to updates of the `office` property.

#### Parameters:

- `options` Object

#### Returns:

Object:

Hash

### `if`

() public

Defined in `packages/ember-glimmer/lib/helpers/if-unless.js:20`

Use the `if` block helper to conditionally render a block depending on a property. If the property is "falsey", for example: `false`, `undefined`, `null`, `""`, `0`, `NaN` or an empty array, the block will not be rendered.

    {{! will not render if foo is falsey}}
    {{#if foo}}
      Welcome to the {{foo.bar}}
    {{/if}}

You can also specify a template to show if the property is falsey by using the `else` helper.

    {{! is it raining outside?}}
    {{#if isRaining}}
      Yes, grab an umbrella!
    {{else}}
      No, it's lovely outside!
    {{/if}}

You are also able to combine `else` and `if` helpers to create more complex conditional logic.

    {{#if isMorning}}
      Good morning
    {{else if isAfternoon}}
      Good afternoon
    {{else}}
      Good night
    {{/if}}

You can use `if` inline to conditionally render a single property or string. This helper acts like a ternary operator. If the first property is truthy, the second argument will be displayed, if not, the third argument will be displayed

    {{if useLongGreeting "Hello" "Hi"}} Dave

Finally, you can use the `if` helper inside another helper as a subexpression.

    {{some-component height=(if isBig "100" "10")}}

### `if`

() public

Defined in `packages/ember-glimmer/lib/helpers/if-unless.js:112`

The inline `if` helper conditionally renders a single property or string. This helper acts like a ternary operator. If the first property is truthy, the second argument will be displayed, otherwise, the third argument will be displayed

    {{if useLongGreeting "Hello" "Hi"}} Alex

You can use the `if` helper inside another helper as a subexpression.

    {{some-component height=(if isBig "100" "10")}}

### `input`

(

- `options`

)
public

Defined in `packages/ember-glimmer/lib/syntax/input.js:16`

The `{{input}}` helper lets you create an HTML `<input />` component. It causes an `Ember.TextField` component to be rendered. For more info, see the Ember.TextField docs and the templates guide.

    {{input value="987"}}

renders as:

    <input type="text" value="987" />

### Text field

If no `type` option is specified, a default of type 'text' is used. Many of the standard HTML attributes may be passed to this helper.

`readonly` | `required` | `autofocus`
`value` | `placeholder` | `disabled`
`size` | `tabindex` | `maxlength`
`name` | `min` | `max`
`pattern` | `accept` | `autocomplete`
`autosave` | `formaction` | `formenctype`
`formmethod` | `formnovalidate` | `formtarget`
`height` | `inputmode` | `multiple`
`step` | `width` | `form`
`selectionDirection` | `spellcheck` |

When set to a quoted string, these values will be directly applied to the HTML element. When left unquoted, these values will be bound to a property on the template's current rendering context (most typically a controller instance). A very common use of this helper is to bind the `value` of an input to an Object's attribute:

    Search:
    {{input value=searchWord}}

In this example, the inital value in the `<input />` will be set to the value of `searchWord`. If the user changes the text, the value of `searchWord` will also be updated.

### Actions

The helper can send multiple actions based on user events. The action property defines the action which is sent when the user presses the return key.

    {{input action="submit"}}

The helper allows some user events to send actions.

- `enter`
- `insert-newline`
- `escape-press`
- `focus-in`
- `focus-out`
- `key-press`
- `key-up`

For example, if you desire an action to be sent when the input is blurred, you only need to setup the action name to the event name property.

    {{input focus-out="alertMessage"}}

See more about Text Support Actions

### Extending `Ember.TextField`

Internally, `{{input type="text"}}` creates an instance of `Ember.TextField`, passing arguments from the helper to `Ember.TextField`'s `create` method. You can extend the capabilities of text inputs in your applications by reopening this class. For example, if you are building a Bootstrap project where `data-*` attributes are used, you can add one to the `TextField`'s `attributeBindings` property:

    Ember.TextField.reopen({
      attributeBindings: ['data-error']
    });

Keep in mind when writing `Ember.TextField` subclasses that `Ember.TextField` itself extends `Ember.Component`. Expect isolated component semantics, not legacy 1.x view semantics (like `controller` being present). See more about Ember components

### Checkbox

Checkboxes are special forms of the `{{input}}` helper. To create a `<checkbox />`:

    Emberize Everything:
    {{input type="checkbox" name="isEmberized" checked=isEmberized}}

This will bind checked state of this checkbox to the value of `isEmberized` -- if either one changes, it will be reflected in the other.

The following HTML attributes can be set via the helper:

- `checked`
- `disabled`
- `tabindex`
- `indeterminate`
- `name`
- `autofocus`
- `form`

### Extending `Ember.Checkbox`

Internally, `{{input type="checkbox"}}` creates an instance of `Ember.Checkbox`, passing arguments from the helper to `Ember.Checkbox`'s `create` method. You can extend the capablilties of checkbox inputs in your applications by reopening this class. For example, if you wanted to add a css class to all checkboxes in your application:

    Ember.Checkbox.reopen({
      classNames: ['my-app-checkbox']
    });

#### Parameters:

- `options` Hash

### `link-to`

(

- `routeName`
- `[context]`
- `[options]`

)
String public

Defined in `packages/ember-glimmer/lib/components/link-to.js:6`

The `{{link-to}}` component renders a link to the supplied `routeName` passing an optionally supplied model to the route as its `model` context of the route. The block for `{{link-to}}` becomes the innerHTML of the rendered element:

    {{#link-to 'photoGallery'}}
      Great Hamster Photos
    {{/link-to}}

You can also use an inline form of `{{link-to}}` component by passing the link text as the first argument to the component:

    {{link-to 'Great Hamster Photos' 'photoGallery'}}

Both will result in:

    <a href="/hamster-photos">
      Great Hamster Photos
    </a>

### Supplying a tagName

By default `{{link-to}}` renders an `<a>` element. This can be overridden for a single use of `{{link-to}}` by supplying a `tagName` option:

    {{#link-to 'photoGallery' tagName="li"}}
      Great Hamster Photos
    {{/link-to}}

    <li>
      Great Hamster Photos
    </li>

To override this option for your entire application, see "Overriding Application-wide Defaults".

### Disabling the `link-to` component

By default `{{link-to}}` is enabled. any passed value to the `disabled` component property will disable the `link-to` component.

static use: the `disabled` option:

    {{#link-to 'photoGallery' disabled=true}}
      Great Hamster Photos
    {{/link-to}}

dynamic use: the `disabledWhen` option:

    {{#link-to 'photoGallery' disabledWhen=controller.someProperty}}
      Great Hamster Photos
    {{/link-to}}

any passed value to `disabled` will disable it except `undefined`. to ensure that only `true` disable the `link-to` component you can override the global behaviour of `Ember.LinkComponent`.

    Ember.LinkComponent.reopen({
      disabled: Ember.computed(function(key, value) {
        if (value !== undefined) {
          this.set('_isDisabled', value === true);
        }
        return value === true ? get(this, 'disabledClass') : false;
      })
    });

see "Overriding Application-wide Defaults" for more.

### Handling `href`

`{{link-to}}` will use your application's Router to fill the element's `href` property with a url that matches the path to the supplied `routeName` for your router's configured `Location` scheme, which defaults to Ember.HashLocation.

### Handling current route

`{{link-to}}` will apply a CSS class name of 'active' when the application's current route matches the supplied routeName. For example, if the application's current route is 'photoGallery.recent' the following use of `{{link-to}}`:

    {{#link-to 'photoGallery.recent'}}
      Great Hamster Photos
    {{/link-to}}

will result in

    <a href="/hamster-photos/this-week" class="active">
      Great Hamster Photos
    </a>

The CSS class name used for active classes can be customized for a single use of `{{link-to}}` by passing an `activeClass` option:

    {{#link-to 'photoGallery.recent' activeClass="current-url"}}
      Great Hamster Photos
    {{/link-to}}

    <a href="/hamster-photos/this-week" class="current-url">
      Great Hamster Photos
    </a>

To override this option for your entire application, see "Overriding Application-wide Defaults".

### Keeping a link active for other routes

If you need a link to be 'active' even when it doesn't match the current route, you can use the `current-when` argument.

    {{#link-to 'photoGallery' current-when='photos'}}
      Photo Gallery
    {{/link-to}}

This may be helpful for keeping links active for:

- non-nested routes that are logically related
- some secondary menu approaches
- 'top navigation' with 'sub navigation' scenarios

A link will be active if `current-when` is `true` or the current route is the route this link would transition to.

To match multiple routes 'space-separate' the routes:

    {{#link-to 'gallery' current-when='photos drawings paintings'}}
      Art Gallery
    {{/link-to}}

### Supplying a model

An optional model argument can be used for routes whose paths contain dynamic segments. This argument will become the model context of the linked route:

    Router.map(function() {
      this.route("photoGallery", {path: "hamster-photos/:photo_id"});
    });

    {{#link-to 'photoGallery' aPhoto}}
      {{aPhoto.title}}
    {{/link-to}}

    <a href="/hamster-photos/42">
      Tomster
    </a>

### Supplying multiple models

For deep-linking to route paths that contain multiple dynamic segments, multiple model arguments can be used. As the router transitions through the route path, each supplied model argument will become the context for the route with the dynamic segments:

    Router.map(function() {
      this.route("photoGallery", { path: "hamster-photos/:photo_id" }, function() {
        this.route("comment", {path: "comments/:comment_id"});
      });
    });

This argument will become the model context of the linked route:

    {{#link-to 'photoGallery.comment' aPhoto comment}}
      {{comment.body}}
    {{/link-to}}

    <a href="/hamster-photos/42/comments/718">
      A+++ would snuggle again.
    </a>

### Supplying an explicit dynamic segment value

If you don't have a model object available to pass to `{{link-to}}`, an optional string or integer argument can be passed for routes whose paths contain dynamic segments. This argument will become the value of the dynamic segment:

    Router.map(function() {
      this.route("photoGallery", { path: "hamster-photos/:photo_id" });
    });

    {{#link-to 'photoGallery' aPhotoId}}
      {{aPhoto.title}}
    {{/link-to}}

    <a href="/hamster-photos/42">
      Tomster
    </a>

When transitioning into the linked route, the `model` hook will be triggered with parameters including this passed identifier.

### Allowing Default Action

By default the `{{link-to}}` component prevents the default browser action by calling `preventDefault()` as this sort of action bubbling is normally handled internally and we do not want to take the browser to a new URL (for example).

If you need to override this behavior specify `preventDefault=false` in your template:

    {{#link-to 'photoGallery' aPhotoId preventDefault=false}}
      {{aPhotoId.title}}
    {{/link-to}}

### Overriding attributes

You can override any given property of the `Ember.LinkComponent` that is generated by the `{{link-to}}` component by passing key/value pairs, like so:

    {{#link-to  aPhoto tagName='li' title='Following this link will change your life' classNames='pic sweet'}}
      Uh-mazing!
    {{/link-to}}

See Ember.LinkComponent for a complete list of overrideable properties. Be sure to also check out inherited properties of `LinkComponent`.

### Overriding Application-wide Defaults

`{{link-to}}` creates an instance of `Ember.LinkComponent` for rendering. To override options for your entire application, reopen `Ember.LinkComponent` and supply the desired values:

    Ember.LinkComponent.reopen({
      activeClass: "is-active",
      tagName: 'li'
    })

It is also possible to override the default event in this manner:

    Ember.LinkComponent.reopen({
      eventName: 'customEventName'
    });

#### Parameters:

- `routeName` String
- `[context]` Object optional multiple
- `[options]` Object optional

  Handlebars key/value pairs of options, you can override any property of Ember.LinkComponent

#### Returns:

String:

HTML string

### `loc`

(

- `str`

)
public

Defined in `packages/ember-glimmer/lib/helpers/loc.js:9`

Calls Ember.String.loc with the provided string. This is a convenient way to localize text within a template. For example:

    Ember.STRINGS = {
      '_welcome_': 'Bonjour'
    };

    <div class='message'>
      {{loc '_welcome_'}}
    </div>

    <div class='message'>
      Bonjour
    </div>

See Ember.String.loc for how to set up localized string references.

#### Parameters:

- `str` String

  The string to format.

### `log`

(

- `params`

)
public

Defined in `packages/ember-glimmer/lib/helpers/log.js:9`

`log` allows you to output the value of variables in the current rendering context. `log` also accepts primitive types such as strings or numbers.

    {{log "myVariable:" myVariable }}

#### Parameters:

- `params` Array

### `mount`

() public

Defined in `packages/ember-glimmer/lib/syntax/mount.js:17`

The `{{mount}}` helper lets you embed a routeless engine in a template. Mounting an engine will cause an instance to be booted and its `application` template to be rendered.

For example, the following template mounts the `ember-chat` engine:

    {{! application.hbs }}
    {{mount "ember-chat"}}

Currently, the engine name is the only argument that can be passed to `{{mount}}`.

### `mut`

(

- `[attr]`

)
public

Defined in `packages/ember-glimmer/lib/helpers/mut.js:10`

The `mut` helper lets you clearly specify that a child `Component` can update the (mutable) value passed to it, which will change the value of the parent component.

To specify that a parameter is mutable, when invoking the child `Component`:

    {{my-child childClickCount=(mut totalClicks)}}

The child `Component` can then modify the parent's value just by modifying its own property:

    // my-child.js
    export default Component.extend({
      click() {
        this.incrementProperty('childClickCount');
      }
    });

Note that for curly components (`{{my-component}}`) the bindings are already mutable, making the `mut` unnecessary.

Additionally, the `mut` helper can be combined with the `action` helper to mutate a value. For example:

    {{my-child childClickCount=totalClicks click-count-change=(action (mut totalClicks))}}

The child `Component` would invoke the action with the new click value:

    // my-child.js
    export default Component.extend({
      click() {
        this.get('click-count-change')(this.get('childClickCount') + 1);
      }
    });

The `mut` helper changes the `totalClicks` value to what was provided as the action argument.

The `mut` helper, when used with `action`, will return a function that sets the value passed to `mut` to its first argument. This works like any other closure action and interacts with the other features `action` provides. As an example, we can create a button that increments a value passing the value directly to the `action`:

    {{! inc helper is not provided by Ember }}
    <button onclick={{action (mut count) (inc count)}}>
      Increment count
    </button>

You can also use the `value` option:

    <input value={{name}} oninput={{action (mut name) value="target.value"}}>

#### Parameters:

- `[attr]` Object optional

  the "two-way" attribute that can be modified.

### `outlet`

(

- `[name]`

)
public

Defined in `packages/ember-glimmer/lib/syntax/outlet.js:34`

The `{{outlet}}` helper lets you specify where a child route will render in your template. An important use of the `{{outlet}}` helper is in your application's `application.hbs` file:

    {{! app/templates/application.hbs }}
    <!-- header content goes here, and will always display -->
    {{my-header}}
    <div class="my-dynamic-content">
      <!-- this content will change based on the current route, which depends on the current URL -->
      {{outlet}}
    </div>
    <!-- footer content goes here, and will always display -->
    {{my-footer}}

See templates guide for additional information on using `{{outlet}}` in `application.hbs`. You may also specify a name for the `{{outlet}}`, which is useful when using more than one `{{outlet}}` in a template:

    {{outlet "menu"}}
    {{outlet "sidebar"}}
    {{outlet "main"}}

Your routes can then render into a specific one of these `outlet`s by specifying the `outlet` attribute in your `renderTemplate` function:

    // app/routes/menu.js
    export default Ember.Route.extend({
      renderTemplate() {
        this.render({ outlet: 'menu' });
      }
    });

See the routing guide for more information on how your `route` interacts with the `{{outlet}}` helper. Note: Your content will not render if there isn't an `{{outlet}}` for it.

#### Parameters:

- `[name]` String optional

### `partial`

(

- `partialName`

)
public

Defined in `packages/ember-glimmer/lib/index.js:157`

The `partial` helper renders another template without changing the template context:

    {{foo}}
    {{partial "nav"}}

The above example template will render a template named "-nav", which has the same context as the parent template it's rendered into, so if the "-nav" template also referenced `{{foo}}`, it would print the same thing as the `{{foo}}` in the above example.

If a "-nav" template isn't found, the `partial` helper will fall back to a template named "nav".

### Bound template names

The parameter supplied to `partial` can also be a path to a property containing a template name, e.g.:

    {{partial someTemplateName}}

The above example will look up the value of `someTemplateName` on the template context (e.g. a controller) and use that value as the name of the template to render. If the resolved value is falsy, nothing will be rendered. If `someTemplateName` changes, the partial will be re-rendered using the new template name.

#### Parameters:

- `partialName` String

  The name of the template to render minus the leading underscore.

### `query-params`

(

- `hash`

)
Object public

Defined in `packages/ember-glimmer/lib/helpers/query-param.js:10`

This is a helper to be used in conjunction with the link-to helper. It will supply url query parameters to the target route.

Example

    {{#link-to 'posts' (query-params direction="asc")}}Sort{{/link-to}}

#### Parameters:

- `hash` Object

  takes a hash of query parameters

#### Returns:

Object:

A `QueryParams` object for `{{link-to}}`

### `readonly`

(

- `[attr]`

)
private

Defined in `packages/ember-glimmer/lib/helpers/readonly.js:9`

The `readonly` helper let's you specify that a binding is one-way only, instead of two-way. When you pass a `readonly` binding from an outer context (e.g. parent component), to to an inner context (e.g. child component), you are saying that changing that property in the inner context does not change the value in the outer context.

To specify that a binding is read-only, when invoking the child `Component`:

    export default Component.extend({
      totalClicks: 3
    });

    {{log totalClicks}} // -> 3
    {{my-child childClickCount=(readonly totalClicks)}}

Now, when you update `childClickCount`:

    export default Component.extend({
      click() {
        this.incrementProperty('childClickCount');
      }
    });

The value updates in the child component, but not the parent component:

    {{log childClickCount}} //-> 4

    {{log totalClicks}} //-> 3
    {{my-child childClickCount=(readonly totalClicks)}}

### Objects and Arrays

When passing a property that is a complex object (e.g. object, array) instead of a primitive object (e.g. number, string), only the reference to the object is protected using the readonly helper. This means that you can change properties of the object both on the parent component, as well as the child component. The `readonly` binding behaves similar to the `const` keyword in JavaScript.

Let's look at an example:

First let's set up the parent component:

    export default Ember.Component.extend({
      clicks: null,

      init() {
        this._super(...arguments);
        this.set('clicks', { total: 3 });
      }
    });

    {{log clicks.total}} //-> 3
    {{my-child childClicks=(readonly clicks)}}

Now, if you update the `total` property of `childClicks`:

    export default Ember.Component.extend({
      click() {
        this.get('clicks').incrementProperty('total');
      }
    });

You will see the following happen:

    {{log clicks.total}} //-> 4
    {{my-child childClicks=(readonly clicks)}}

    {{log childClicks.total}} //-> 4

#### Parameters:

- `[attr]` Object optional

  the read-only attribute.

### `render`

(

- `name`
- `context`
- `options`

)
String public

Defined in `packages/ember-glimmer/lib/syntax/render.js:52`

Calling `{{render}}` from within a template will insert another template that matches the provided name. The inserted template will access its properties on its own controller (rather than the controller of the parent template).

If a view class with the same name exists, the view class also will be used. Note: A given controller may only be used once in your app in this manner. A singleton instance of the controller will be created for you.

Example:

    App.NavigationController = Ember.Controller.extend({
      who: "world"
    });

    <!-- navigation.hbs -->
    Hello, {{who}}.

    <!-- application.hbs -->
    <h1>My great app</h1>
    {{render "navigation"}}

    <h1>My great app</h1>
    <div class='ember-view'>
      Hello, world.
    </div>

Optionally you may provide a second argument: a property path that will be bound to the `model` property of the controller. If a `model` property path is specified, then a new instance of the controller will be created and `{{render}}` can be used multiple times with the same name.

For example if you had this `author` template.

    <div class="author">
      Written by {{firstName}} {{lastName}}.
      Total Posts: {{postCount}}
    </div>

You could render it inside the `post` template using the `render` helper.

    <div class="post">
      <h1>{{title}}</h1>
      <div>{{body}}</div>
      {{render "author" author}}
    </div>

#### Parameters:

- `name` String
- `context` Object?
- `options` Hash

#### Returns:

String:

HTML string

### `textarea`

(

- `options`

)
public

Defined in `packages/ember-glimmer/lib/components/text_area.js:9`

`{{textarea}}` inserts a new instance of `<textarea>` tag into the template. The attributes of `{{textarea}}` match those of the native HTML tags as closely as possible.

The following HTML attributes can be set:

- `value`
- `name`
- `rows`
- `cols`
- `placeholder`
- `disabled`
- `maxlength`
- `tabindex`
- `selectionEnd`
- `selectionStart`
- `selectionDirection`
- `wrap`
- `readonly`
- `autofocus`
- `form`
- `spellcheck`
- `required`

When set to a quoted string, these value will be directly applied to the HTML element. When left unquoted, these values will be bound to a property on the template's current rendering context (most typically a controller instance).

Unbound:

    {{textarea value="Lots of static text that ISN'T bound"}}

Would result in the following HTML:

    <textarea class="ember-text-area">
      Lots of static text that ISN'T bound
    </textarea>

Bound:

In the following example, the `writtenWords` property on `App.ApplicationController` will be updated live as the user types 'Lots of text that IS bound' into the text area of their browser's window.

    App.ApplicationController = Ember.Controller.extend({
      writtenWords: "Lots of text that IS bound"
    });

    {{textarea value=writtenWords}}

Would result in the following HTML:

    <textarea class="ember-text-area">
      Lots of text that IS bound
    </textarea>

If you wanted a one way binding between the text area and a div tag somewhere else on your screen, you could use `Ember.computed.oneWay`:

    App.ApplicationController = Ember.Controller.extend({
      writtenWords: "Lots of text that IS bound",
      outputWrittenWords: Ember.computed.oneWay("writtenWords")
    });

    {{textarea value=writtenWords}}
    <div>
      {{outputWrittenWords}}
    </div>

Would result in the following HTML:

    <textarea class="ember-text-area">
      Lots of text that IS bound
    </textarea>
    <-- the following div will be updated in real time as you type -->
    <div>
      Lots of text that IS bound
    </div>

Finally, this example really shows the power and ease of Ember when two properties are bound to eachother via `Ember.computed.alias`. Type into either text area box and they'll both stay in sync. Note that `Ember.computed.alias` costs more in terms of performance, so only use it when your really binding in both directions:

    App.ApplicationController = Ember.Controller.extend({
      writtenWords: "Lots of text that IS bound",
      twoWayWrittenWords: Ember.computed.alias("writtenWords")
    });

    {{textarea value=writtenWords}}
    {{textarea value=twoWayWrittenWords}}

    <textarea id="ember1" class="ember-text-area">
      Lots of text that IS bound
    </textarea>
    <-- both updated in real time -->
    <textarea id="ember2" class="ember-text-area">
      Lots of text that IS bound
    </textarea>

### Actions

The helper can send multiple actions based on user events. The action property defines the action which is send when the user presses the return key.

    {{input action="submit"}}

The helper allows some user events to send actions.

- `enter`
- `insert-newline`
- `escape-press`
- `focus-in`
- `focus-out`
- `key-press`

For example, if you desire an action to be sent when the input is blurred, you only need to setup the action name to the event name property.

    {{textarea focus-in="alertMessage"}}

See more about Text Support Actions

### Extension

Internally, `{{textarea}}` creates an instance of `Ember.TextArea`, passing arguments from the helper to `Ember.TextArea`'s `create` method. You can extend the capabilities of text areas in your application by reopening this class. For example, if you are building a Bootstrap project where `data-*` attributes are used, you can globally add support for a `data-*` attribute on all `{{textarea}}`s' in your app by reopening `Ember.TextArea` or `Ember.TextSupport` and adding it to the `attributeBindings` concatenated property:

    Ember.TextArea.reopen({
      attributeBindings: ['data-error']
    });

Keep in mind when writing `Ember.TextArea` subclasses that `Ember.TextArea` itself extends `Ember.Component`. Expect isolated component semantics, not legacy 1.x view semantics (like `controller` being present).

See more about Ember components

#### Parameters:

- `options` Hash

### `unbound`

() public

Defined in `packages/ember-glimmer/lib/helpers/unbound.js:9`

The `{{unbound}}` helper disconnects the one-way binding of a property, essentially freezing its value at the moment of rendering. For example, in this example the display of the variable `name` will not change even if it is set with a new value:

    {{unbound name}}

Like any helper, the `unbound` helper can accept a nested helper expression. This allows for custom helpers to be rendered unbound:

    {{unbound (some-custom-helper)}}
    {{unbound (capitalize name)}}
    {{! You can use any helper, including unbound, in a nested expression }}
    {{capitalize (unbound name)}}

The `unbound` helper only accepts a single argument, and it return an unbound value.

### `unless`

() public

Defined in `packages/ember-glimmer/lib/helpers/if-unless.js:144`

The inline `unless` helper conditionally renders a single property or string. This helper acts like a ternary operator. If the first property is falsy, the second argument will be displayed, otherwise, the third argument will be displayed

    {{unless useLongGreeting "Hi" "Hello"}} Ben

You can use the `unless` helper inside another helper as a subexpression.

    {{some-component height=(unless isBig "10" "100")}}

### `with`

(

- `options`

)
String public

Defined in `packages/ember-glimmer/lib/index.js:79`

Use the `{{with}}` helper when you want to alias a property to a new name. This is helpful for semantic clarity as it allows you to retain default scope or to reference a property from another `{{with}}` block.

If the aliased property is "falsey", for example: `false`, `undefined` `null`, `""`, `0`, NaN or an empty array, the block will not be rendered.

    {{! Will only render if user.posts contains items}}
    {{#with user.posts as |blogPosts|}}
      <div class="notice">
        There are {{blogPosts.length}} blog posts written by {{user.name}}.
      </div>
      {{#each blogPosts as |post|}}
        <li>{{post.title}}</li>
      {{/each}}
    {{/with}}

Without the `as` operator, it would be impossible to reference `user.name` in the example above.

NOTE: The alias should not reuse a name from the bound property path.

For example: `{{#with foo.bar as |foo|}}` is not supported because it attempts to alias using the first part of the property path, `foo`. Instead, use `{{#with foo.bar as |baz|}}`.

#### Parameters:

- `options` Object

#### Returns:

String:

HTML string