Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#588 components/yields #613

Merged
merged 2 commits into from Mar 16, 2019
Merged

#588 components/yields #613

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b050f91
hasBlock => has-block and fix filenames
betocantu93 Mar 15, 2019
beb4f84
update (has-block)
betocantu93 Mar 15, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions guides/release/components/yields.md
View file
Open in desktop
Expand Up @@ -18,7 +18,7 @@ compose components just like you would HTML elements:
Users can pass a block to your component, but by default your component doesn't
know where to put it. You have to decide this by using the `{{yield}}` helper:

```handlebars {data-filename=app/components/modal-dialog/template.hbs}
```handlebars {data-filename=app/templates/components/modal-dialog.hbs}
<dialog>
{{yield}}
</dialog>
Expand Down Expand Up @@ -63,9 +63,9 @@ then nothing will be done with the block.
You can check whether or not a user passed a block to the component with the
`hasBlock` helper:
betocantu93 marked this conversation as resolved.
Show resolved Hide resolved

```handlebars {data-filename=app/components/modal-dialog/template.hbs}
```handlebars {data-filename=app/templates/components/modal-dialog.hbs}
<dialog>
{{#if hasBlock}}
{{#if (has-block)}}
betocantu93 marked this conversation as resolved.
Show resolved Hide resolved
{{yield}}
{{else}}
Default Message
Expand Down Expand Up @@ -95,7 +95,7 @@ function in JavaScript. Consider for instance the `ModalDialog` component -
let's say we want to make the dialog show _conditionally_ when we click a
button:

```handlebars {data-filename=app/components/modal-dialog/template.hbs}
```handlebars {data-filename=app/templates/components/modal-dialog.hbs}
{{#if this.showModal}}
<dialog>
{{yield}}
Expand All @@ -107,7 +107,7 @@ button:
</button>
```

```js {data-filename=app/components/modal-dialog/component.js}
```js {data-filename=app/components/modal-dialog.js}
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
Expand All @@ -128,7 +128,7 @@ those buttons are going to be!

What we can do here is _yield_ the `toggleModal` action:

```handlebars {data-filename=app/components/modal-dialog/template.hbs}
```handlebars {data-filename=app/templates/components/modal-dialog.hbs}
{{#if this.showModal}}
<dialog>
{{yield this.toggleModal}}
Expand Down