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.

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

Be able to have more contentBlock in template #404

Open
DblK opened this issue Jan 28, 2023 · 1 comment
Open

Be able to have more contentBlock in template #404

DblK opened this issue Jan 28, 2023 · 1 comment
Labels
in-discussion We are still discussing how to solve or implement it

Comments

@DblK
Copy link

DblK commented Jan 28, 2023

Hi,

I have the following usecase :

<template name="Component>
  <div class="head">
    {{> Template.contentBlock}}
  </div>
  <div class="content">
    {{> Template.elseBlock}}
  </div>
</template>

So now I can call the template like this:

{{#Component}}
  Part Head
{{else}}
  Part Content
{{/Component}}

So it's fine even if it's look "hacky" to use else block to provide two contentBlock.
In case I built something with more than two I can not use this trick.

I wish to be able to define multiple contentBlock in template and to call be able to specific which content for which contentBlock.

Example usage :

{{#Component}}
<templateBlock1>
  Part Head
</templateBlock1>
<templateBlock2>
  Part Content
</templateBlock2>
{{/Component}}

and for the definion:
```hbs
<template name="Component>
  <div class="head">
    {{> Template.contentBlock1}}
  </div>
  <div class="content">
    {{> Template.contentBlock2}}
  </div>
</template>

It should be like extending the Template.elseBlock to allow more than one.
The goal is to be able to build more flexible template.

@jankapunkt
Copy link
Collaborator

jankapunkt commented Feb 28, 2023

The elseBlock is actually just undocumented but it's 100% supported. However, I agree that there could be a better solution for multiple content blocks.
Currently we can pass arguments to the contentblock, so we could structure them using something like a reserved ìd` attribute:

<template name="component">
  <hr>
  {{> Template.contentBlock id="foo"}}
  <hr>
  {{> Template.contentBlock id="bar"}}
</template>

we could use this attribute to inject a view, say contentBlock, that could be used within the parent:

{{#component}}
  {{#this.contentBlock id="foo"}}
    bar
  {{/this.contentBlock}}
  {{#this.contentBlock id="bar"}}
      moo
  {{/this.contentBlock}}
{{/component}}

Alternatively instead of using ids we could also see if it's feasible to simply use index-based order but that would require to always call all this.contentBlock while the id based solution would allow to skip certain blocks, if desired, which would be the most flexible soltion IMO.

@StorytellerCZ StorytellerCZ added the in-discussion We are still discussing how to solve or implement it label Mar 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in-discussion We are still discussing how to solve or implement it
Projects
None yet
Development

No branches or pull requests

3 participants