`{{yield}}` denotes an area of a template that will be rendered inside of another template. ### Use with `Component` When designing components `{{yield}}` is used to denote where, inside the component's template, an optional block passed to the component should render: ```handlebars {data-filename=app/templates/application.hbs} First name: ``` ```handlebars {data-filename=app/components/labeled-textfield.hbs} {{yield}} ``` Result: ```html First name: ``` Additionally you can `yield` properties into the context for use by the consumer: ```handlebars {data-filename=app/templates/application.hbs} {{#if validationError}}

{{/if}} First name: ``` ```handlebars {data-filename=app/components/labeled-textfield.hbs} {{yield this.validationError}} ``` Result: ```html

First Name must be at least 3 characters long.

First name: ``` `yield` can also be used with the `hash` helper: ```handlebars {data-filename=app/templates/application.hbs} Start date: {{range.start}} End date: {{range.end}} ``` ```handlebars {data-filename=app/components/date-ranges.hbs}

``` Result: ```html

Start date: July 1st End date: July 30th

``` Multiple values can be yielded as block params: ```handlebars {data-filename=app/templates/application.hbs}

{{body}} ``` ```handlebars {data-filename=app/components/banner.hbs}

``` Result: ```html

Hello title

hello subtitle

body text

``` However, it is preferred to use the hash helper, as this can prevent breaking changes to your component and also simplify the api for the component. Multiple components can be yielded with the `hash` and `component` helper: ```handlebars {data-filename=app/templates/application.hbs} Banner title Banner subtitle A load of body text ``` ```js {data-filename=app/components/banner.js} import Title from './banner/title'; import Subtitle from './banner/subtitle'; import Body from './banner/body'; export default class Banner extends Component { Title = Title; Subtitle = Subtitle; Body = Body; } ``` ```handlebars {data-filename=app/components/banner.hbs}

{{yield (hash Title=this.Title Subtitle=this.Subtitle Body=(component this.Body defaultArg="some value") )}}

``` Result: ```html

Banner title

Banner subtitle

A load of body text

``` A benefit of using this pattern is that the user of the component can change the order the components are displayed. ```handlebars {data-filename=app/templates/application.hbs} Banner subtitle Banner title A load of body text ``` Result: ```html

Banner subtitle

Banner title

A load of body text

``` Another benefit to using `yield` with the `hash` and `component` helper is you can pass attributes and arguments to these components: ```handlebars {data-filename=app/templates/application.hbs} Banner subtitle Banner title A load of body text ``` ```handlebars {data-filename=app/components/banner/subtitle.hbs} {{!-- note the use of ..attributes --}}

``` ```handlebars {data-filename=app/components/banner/title.hbs} {{#if (eq @variant "loud")}}

{{/if}} ``` Result: ```html

Banner subtitle

Banner title

A load of body text

```

{{title}}

{{subtitle}}

Hello title

hello subtitle

Banner title

Banner subtitle

Banner subtitle

Banner title

{{yield}}

{{yield}}

{{yield}}

Banner subtitle

Banner title

Class BucketCache private