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

Feature: Component-like partial templates with child content #23

Open
Antaris opened this issue Nov 11, 2024 · 0 comments
Open

Feature: Component-like partial templates with child content #23

Antaris opened this issue Nov 11, 2024 · 0 comments

Comments

@Antaris
Copy link
Collaborator

Antaris commented Nov 11, 2024

Enable scenarios where content can be inserted into a a partial template as child content, alongside existing functionality that supports arguments and parameters.

Declaring zones in a partial template

A partial template could define a zone for child content, using the < character to indicate "insert content into this zone, named children:

<div>
  {{<children}}
</div>

You could potentially define multiple zones, maybe as a result of a conditional value

{{#if hasData}}
  {{<has_content}}
{{^}}
  {{<no_content}}
{{/if}}

Adding a partial template with child content

The current syntax to include a partial template is:

<div>
  {{>partial}}
</div>

To make it simple for the parser, extending the # block syntax might be the better way, so perhaps:

{{#>partial}}
  <!-- content here.
{{/partial}}

For a partial that supports only one zone, which could be implicitly named children:

{{#>partial}}
  My nested content here
{{/partial}}

For a partial that supports multiple zones:

{{#>partial hasData=someTruthyOrFalseyValue}}
  {{>has_content}}
    We have content!
  {{/has_content}}
  {{>no_content}}
    We have no content
  {{/no_content}}
{{/partial}}

Use cases:

Layout-type partials:

{{#>layout theme="dark"}}
  <h1>Body content here</h1>
{{/layout}}

Re-usable component-type partials:

{{#>two_column_row}}
  {{>column1}}
    <img src="..." />
  {{/column1}}
  {{>column2}}
    <h2>Column content here</h2>
  {{/column2}}
{{/two_column_row}}

Partial templates like this would still support passing in arguments, or maps:

{{#>two_column_row cssClass="image-left"}}
  {{>column1}}
    <img src="..." />
  {{/column1}}
  {{>column2}}
    <h2>Column content here</h2>
  {{/column2}}
{{/two_column_row}}

For child zones, a single > tag would be used, but only supported as a direct child of a partial with nested content?

Also, should these be named block partials? components? zoned-partials?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant