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

allow handlebars component nesting #111

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

cxq
Copy link
Contributor

@cxq cxq commented Mar 1, 2017

In some cases, with more complex components like media-object, we need to split them into small pieces.

Potentially, I can have several sections and that can contains "custom html" and passing everything using parameter is not flexible enough.

Here is an example with the code changes using nested templates:

{{{yield}}} is the helper that renders everything within a component helper

media-object.scss

{{#include './components/media-object/container'}}
    {{#include './components/media-object/section' align="middle"}}
        <img src="https://dummyimage.com/50x50/ededed/9b9b9b.jpg&text=IMG"/>
    {{/include}}
    {{#include './components/media-object/section'}}
        <h4>Dreams feel real while we're in them.</h4>
        <p>I'm going to improvise. Listen, there's something you should know about me... about inception. An idea is
        like a virus, resilient, highly contagious. The smallest seed of an idea can grow. It can grow to define or
        destroy you.</p>
    {{/include}}
{{/include}}

components/media-object/container.hbs

<div class="c-media-object">
    {{{yield}}}
</div>

components/media-object/section.hbs

<div class="c-media-object__section {{#if align}}c-media-object__section--{{align}}{{/if}}">
    {{{yield}}}
</div>

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

Successfully merging this pull request may close these issues.

2 participants