rockandrollwithemberjs / rarwe-issues

Errata and updates for the Rock and Roll with Ember.js book
https://rockandrollwithemberjs.com
43 stars 4 forks source link

[Enhancement] Clarify "block" meaning when used in template #486

Closed GradedJestRisk closed 4 years ago

GradedJestRisk commented 4 years ago

blockis introduced in chapter 3

accessible inside the block with the name given after the as keyword.

<ul>
{{#each (..) ) as |song| }}
<li> {{song.title}} by {{song.band}} ({{song.rating}}) </li>
{{/each}}
</ul>

It is defined in chapter 6

The block itself (the content between the opening and closing tag) is not required

<StarRating @rating={{song.rating}}>
{{!-- Some content here --}}
</StarRating>

Still, I'm quite new in web app, and tried to link the word to previous notions

It didn't fit, as block can be included :

I would end up saying is block is a sequence of HTML elements inside a non-HTML (not-native) markup. WDYT ?

balinterdi commented 4 years ago

I would end up saying is block is a sequence of HTML elements inside a non-HTML (not-native) markup. WDYT ?

I would say a block in Handlebars templates is the content between an opening and closing Handlebars tag:

{{#each ...}}...{{/each}}

Angle-bracket component calls makes this simple definition not so simple. Before we had them, the component call looked just like the each call:

{{#star-rating ...}}...{{/star-rating}}, now its <StarRating ...>...</StarRating>.

The idea is exactly the same, but now we have two syntaxes for it. I'm still grateful for having angle-bracket invocation calls, don't get me wrong. It just makes explaining blocks a bit harder, that's all.

I think you're right, I should tighten the definition of template blocks.

GradedJestRisk commented 4 years ago

Thanks for the detailed answer ! If block is frequently used word in Ember, I thought valuable to dispel any doubt.

BTW, look like it is in the guides

As shown here, we can pass different content into the tag. The content of the tag is also referred to as the block. The {{yield}} syntax yields to the block once the block is passed into the component.

balinterdi commented 4 years ago

Thank you, I added a sentence to make this more precise.