Rendering Values

For Modifiers, there is a specific syntax that only modifiers may reside in

<template>
  <div {{someModifier}}>
</template>

or via property on some object

<template>
  <div {{this.property.someModifier}}>
</template>

or via an argument passed to a component

<template>
  <div {{@someModifier}}>
</template>

Modifiers can be curried with the modifier helper keyword:

<template>
  {{! In a component called "Example" }}
  {{yield (modifier someModifier "arguments" "here")}}
</template>

<template>
  {{! Usage: }}
  <Example as |theModifier|>
    <div {{theModifier}}>
  </Example>
</template>

For Helpers, there is a specific syntax that only helpers may reside in

<template>
  {{ (theHelper) }}
</template>

or nested in a sub-expression

import { hash } from '@ember/helper';

<template>
  {{yield (hash key=(theHelper) key2=(theHelper with args)) }}
</template>

or via property on some object

<template>
  {{ (this.property.theHelper) }}
</template>

or via an argument passed to a component

<template>
  {{ (@theHelper) }}
</template>

Helpers can be curried with the helper helper keyword:

<template>
  {{! In a component called "Example" }}
  {{yield (helper someHelper "arguments" "here")}}
</template>

<template>
  {{! Usage: }}
  <Example as |theHelper|>
    {{ (theHelper) }}
  </Example>
</template>

For Components, there is a specific syntax that only components may reside in

<template>
  <AComponent />
</template>

or via a property on some object

<template>
  <this.someComponent />
</template>

or via an argument passed to a component

<template>
  <@someComponent />
</template>

Components can be curried with the component helper keyword:

<template>
  {{!
  In a component called "Example".
  Note that components may only receive named arguments
  }}
  {{yield (component someComponent foo="arguments" bar="here")}}
</template>

<template>
  {{! Usage: }}
  <Example as |theComponent|>
    <theComponent />
  </Example>
</template>