Passing content to nested partials in assemble

2019-08-07 08:42发布

站内问答 / 移动开发
1677 1 2

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! :-)

1条回答
再贱就再见
2楼-- · 2019-08-07 09:29

@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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)