Passing content to nested partials in assemble

走远了吗. 提交于 2019-12-11 10:28:01

问题


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:


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



来源:https://stackoverflow.com/questions/23552386/passing-content-to-nested-partials-in-assemble

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!