diff --git a/.remarkignore b/.remarkignore index 73a0c1760..1d588095c 100644 --- a/.remarkignore +++ b/.remarkignore @@ -22,7 +22,6 @@ guides/**/*.md !guides/applications/initializers.md !guides/applications/run-loop.md !guides/code-editors/index.md -!guides/components/block-content.md !guides/components/built-in-components.md !guides/components/component-arguments-and-html-attributes.md !guides/components/index.md diff --git a/guides/components/block-content.md b/guides/components/block-content.md index 85c037249..6ab2cd8e5 100644 --- a/guides/components/block-content.md +++ b/guides/components/block-content.md @@ -306,4 +306,98 @@ Il est possible de retourner ainsi plusieurs valeurs, séparées par des espaces ``` +## Named Blocks + +If you want to yield content to different spots in the same component, you can use named blocks. You just need to specify a name for the yielded block, like this: + +```handlebars +{{yield to="somePlace"}} +``` + +You could also want to pass some values. This is the same process as the default `yield`, but you just have to pass `to` as the last argument. An example would be the popover: + +```handlebars {data-filename=app/components/popover.hbs} +
+
+ {{yield this.isOpen to="trigger"}} +
+ {{#if this.isOpen}} +
+ {{yield to="content"}} +
+ {{/if}} +
+``` + +Without named blocks, we would certainly have to pass components as `args` to the popover. But this is much more practical! + +Here’s how we would call our named blocks as a consumer: + +```handlebars + + <:trigger as |open|> + + + <:content> + This is what is shown when I'm opened! + + +``` + +We know the state of the popover because we passed it as an argument to the `yield`. To access its value, use the block parameters at the named block scope. It will not be accessible at the `Popover` level, so if you want the value to be available for all the blocks, you will have to pass it for each of them. + +Rendering the previous code example would give this as result: + +```html + +
+
+ +
+
+ This is what is showed when I'm opened! +
+
+``` + +Don't worry, you can also still use `yield` by itself, and mix it with named blocks. Let’s take a card example: + +```handlebars {data-filename=app/components/card.hbs} +
+ {{#if (has-block "title")}} +
+ {{yield to="title"}} +
+ {{/if}} +
+ {{yield}} +
+
+``` + +A yielded block without a name is called `default`. So to access it, it’s like any other named blocks. + +```handlebars + + <:title> +

It's nice to have me. Sometimes

+ + <:default> + The card content will appear here! + + +``` + +The title being optional when you create a card, you can use the `(has-block)` helper with the named block by adding its name as a first parameter. That means you could also create this card: + +```handlebars + + I don't want any title, and I only have a default content! + +``` + +As you are not using named blocks, you can simply yield the content you would like to add, which becomes the default yield block. + + + diff --git a/guides/components/introducing-components.md b/guides/components/introducing-components.md index aede1499b..49d4fd0c7 100644 --- a/guides/components/introducing-components.md +++ b/guides/components/introducing-components.md @@ -4,7 +4,7 @@ In Ember, those smaller pieces are called _components_. Let's start with the sample HTML for a messaging app (that we introduced in the previous chapter, if you're reading the guides in order): -```html {data-filename="app/templates/application.hbs"} +```handlebars {data-filename="app/templates/application.hbs"}