1

I'm using assemble for prototyping a new site.

I would like to modularize my code quite drastically, much like Brad Frost is evangelizing with his pattern lab.

EXAMPLE

Basically I would like to have a title partial ("atom" in pattern-lab speak) which is used inside a hero partial ("molecule"):

title.hbs

<h1 class="{{class}}">{{text}}</h1>


hero.hbs

<section class="hero-unit">
    {{!-- image and stuff --}}
    <header class="hero-description">
        {{> title }}
        {{> subTitle }}
    </header>
</section>


The hero partial is supposed to generic; I want to pass in data from JSON files per particular page. For my pages, I use a default layout that offers blocks. For example:

default.hbs

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        {{#block "hero"}}{{/block}} 
        {{#block "body"}}{{/block}}
    </body>
</html>


myPageWithHero.hbs

{{#extend "default"}}
    {{#content "hero"}}
        {{ >hero }}
    {{/content}}
    {{#content "body"}}
        {{!-- myPageContent --}}
    {{/content}}
{{/extend}}


Now I'd like to set {{text}} inside the title partial which is inside the hero partial via the myPageWithHero.json file that I have. Is that at all possible? Or is my approach (which I have described in this very oversimplified example) completely deranged?

Cheers for any pointers! :-)

jonschlinkert
  • 10,872
  • 4
  • 43
  • 50
polarbirke
  • 33
  • 4
  • do you have a public repository I can see? I think this is straight forward, but I wanted to test it out before giving a longer answer. – doowb May 09 '14 at 13:32
  • Hi @doowb, thanks for getting back to me. I'm afraid I don't have a public repo as it is client work. My requirement is simply to pass different text snippets to the title partial inside the hero partial from homepage.hbs, productpage.hbs etc. – polarbirke May 09 '14 at 15:02

1 Answers1

0

@polarbirke since you want to use the data from myPageWithHero.json, that data will be available on the page object when rendering myPageWithHero.hbs, so you can pass that object to the hero partial. This will setup the context for that partial and the title partial will inherit that context:

{{#extend "base"}}
  {{#content "hero"}}
    {{> hero page}}
  {{/content}}
  {{#content "body"}}
    {{!-- myPageContent --}}
  {{/content}}
{{/extend}}

If you have other objects in your data that you'd like to use instead, you can pass that instead:

data.json

{
  "title1": {
    "class": "success",
    "text": "Good Title"
  },
  "title2": {
    "class": "error",
    "text": "Bad Title"
  }
}

myPageWithHero.hbs

{{#extend "base"}}
  {{#content "hero"}}
    {{> hero title1}}
  {{/content}}
  {{#content "body"}}
    {{!-- myPageContent --}}
  {{/content}}
{{/extend}}

I hope this helps, let me know if you have any questions.

doowb
  • 3,372
  • 1
  • 17
  • 25
  • Thanks, it did help! Sorry for not getting back earlier, I had to spend time on another project/deadline before I could get back on this one. I will now happily return to the world of assemble. :) – polarbirke May 21 '14 at 12:49