EmberJS as keyword in handlebars template

Question

I have referred to the EmberJS official guide to understand the usage of "as" keyword in handlebars template. But I find it very confusing.

What does this do, in relation to passing values to component, yield, etc?

Answer 1

If component yields some value, as keyword can be used to refer to it. I can offer following example.

Component's file:

//yield-something.js
import Component from '@ember/component';

/**
 * This component just yields something
 *
 * @module
 * @augments Ember.Component
 */
export default Component.extend({
    /**
     * Something to yield
     */
    something: undefined
});

Component's template's file:

{{yield something}}

Usage:

{{#yield-something something=(hash name='Joe') as |data|}}
  Hello {{data.name}}
{{/yield-something}}

This component yields what I pass to it and then I use that as data (hash helper creates an object from passed parameters). This example could look weird, but it's short and I hope it helps. Practical usage of yield and as is to pass some object or value created by component to nested components/template. Yield are not limited to just one parameter, you can yield few values {{yield 'Hello' 'World' 123}} and then use them like this: {{#component-name as |val1 val2 val3|}}

You can take a look how ember-leaflet uses it to pass outer layers to nested. Yield is not used in every component. In fact, if you are new to ember you may not have a need to use yield, unless you need to build complex set of components (like ember-leaflet).