Skip to content

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

@Antaris

Description

@Antaris

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions