Menu icon Foundation
Dynamic partial name

Hi all, i am trying to build a documentation about my mailing components.

I am using a DATA yml file with all my components included with a couple of values.

One of these values is the partial name which i want to use to display on my documentation page the component.

I am using a each loop to display the components description, title, and preview. This is the code:

components:
  product-teaser:
    id: "footerProductTeaser"
    title: 'Product teaser'
    text: 'COMPONENT DESCRIPTION'
    name: 
      path: 'de-2017-product-teaser-default' << THIS IS THE PARTIAL NAME
      text: 'SOME DESCRIPTION'
    code:
      inky: 
        path: '/src/partials/components/de-2017-product-teaser-default.html'
        text : 'TBD'
      scss: 
        path: '/src/assets/scss/components/_product_teaser.scss'
        text : 'TBD'
        
  social-media-links:
    id: "footerSocialMediaLinks"
    title: 'Social media links'
    text: 'TBD'
    name: 
      path: 'de-2017-social-media-links' << THIS IS THE PARTIAL NAME
      text: 'SOME DESCRIPTION'
    code:
      inky: 
        path: '/src/partials/layout/footer/de-2017-social-media-links.html'
        text: 'TBD'
      scss: 
        path: '/src/assets/scss/components/_footer_social_media_links.scss'
        text : 'TBD'
{{#each styleguide_components_footer.docs.components}}

	<!-- Social Media Links -->
	{{> styleguide_components_footer

		prop-component-id=this.id
		prop-component-title=this.title
		prop-component-text=this.text

		prop-component-handlebars-name=this.name.path
		prop-component-handlebars-text=this.name.text

		prop-code-inky-path=this.code.inky.path
		prop-code-inky-text=this.code.inky.text
		prop-code-scss-path=this.code.scss.path
		prop-code-scss-text=this.code.scss.text
	}}

	<hr />

{{/each}}

 

<spacer size="20"></spacer>

<row>
	<columns small="24" valign="middle">
		<h3 id="{{{ prop-component-id }}}">
			{{{ prop-component-title }}}
			<small class="small-top-link"><a href="#overviewlinks">TOP</a></small>
		</h3>
		<p>{{{ prop-component-text }}}</p>
	</columns>
</row>

<spacer size="20"></spacer>

<div class="component-preview-wrapper">
	<h5>Component preview:</h5>
	<div class="component-preview">
<!-- THIS IS MY ISSUE -->
		{{> prop-component-handlebars-name }}
<!-- !THIS IS MY ISSUE -->
	</div>
</div>

<spacer size="5"></spacer>

<div class="styleguide-code">
	<h5>Component implement code:</h5>
	<pre class="language-handlebars">
		{{{{raw}}}}{{> {{{{/raw}}}}{{ prop-component-handlebars-name }}{{{{raw}}}} }}{{{{/raw}}}}
	</pre>
	<div class="code-description">
		{{ prop-component-handlebars-text }}
	</div>
</div>

<spacer size="5"></spacer>

<div class="styleguide-code">
	<h5>Component source code:</h5>

	<div class="tabs">
		<ul>
		    <li><a href="#{{prop-component-id}}Inky">INKY</a></li>
		    <li><a href="#{{prop-component-id}}Scss">SCSS</a></li>
	  	</ul>
	  	<div id="{{prop-component-id}}Inky">
			<pre 	class="js-code-import prettyprint  lang-handlebars" 
					data-source="{{prop-code-inky-path}}"
			></pre>
			<div class="code-description">
				{{prop-code-inky-text}}
			</div>
	  	</div>
	  	<div id="{{prop-component-id}}Scss">
			<pre 	class="js-code-import prettyprint  lang-css" 
					data-source="{{prop-code-scss-path}}"
			></pre>
			<div class="code-description">
				{{prop-code-scss-text}}
			</div>
	  	</div>
	</div>
</div>

<spacer size="20"></spacer>

 

My issue is, that i want to load a partial, as preview of the component, within a each loop with data from the yml file.

But its not really working.

 

I had one working solution:

	{{#with prop-component-handlebars-name as |partial| }}
		{{> (partial) }}
	{{/with}

But if my component is based on a yml file with a each loop to display content (e.g. this.title - inside the component loop), on my documentation is no content displayed for this component. I think its because it takes the data from the document yml file instead of the yml file of its own component.

 

I'll hope that my question is clear enough to understand, my english is not the best :(

 

Any ideas how i could solve this issue? I already googled a couple of hours...

 

THANKS

Tobi

Partialsmailsdocumentation

Hi all, i am trying to build a documentation about my mailing components.

I am using a DATA yml file with all my components included with a couple of values.

One of these values is the partial name which i want to use to display on my documentation page the component.

I am using a each loop to display the components description, title, and preview. This is the code:

components:
  product-teaser:
    id: "footerProductTeaser"
    title: 'Product teaser'
    text: 'COMPONENT DESCRIPTION'
    name: 
      path: 'de-2017-product-teaser-default' << THIS IS THE PARTIAL NAME
      text: 'SOME DESCRIPTION'
    code:
      inky: 
        path: '/src/partials/components/de-2017-product-teaser-default.html'
        text : 'TBD'
      scss: 
        path: '/src/assets/scss/components/_product_teaser.scss'
        text : 'TBD'
        
  social-media-links:
    id: "footerSocialMediaLinks"
    title: 'Social media links'
    text: 'TBD'
    name: 
      path: 'de-2017-social-media-links' << THIS IS THE PARTIAL NAME
      text: 'SOME DESCRIPTION'
    code:
      inky: 
        path: '/src/partials/layout/footer/de-2017-social-media-links.html'
        text: 'TBD'
      scss: 
        path: '/src/assets/scss/components/_footer_social_media_links.scss'
        text : 'TBD'
{{#each styleguide_components_footer.docs.components}}

	<!-- Social Media Links -->
	{{> styleguide_components_footer

		prop-component-id=this.id
		prop-component-title=this.title
		prop-component-text=this.text

		prop-component-handlebars-name=this.name.path
		prop-component-handlebars-text=this.name.text

		prop-code-inky-path=this.code.inky.path
		prop-code-inky-text=this.code.inky.text
		prop-code-scss-path=this.code.scss.path
		prop-code-scss-text=this.code.scss.text
	}}

	<hr />

{{/each}}

 

<spacer size="20"></spacer>

<row>
	<columns small="24" valign="middle">
		<h3 id="{{{ prop-component-id }}}">
			{{{ prop-component-title }}}
			<small class="small-top-link"><a href="#overviewlinks">TOP</a></small>
		</h3>
		<p>{{{ prop-component-text }}}</p>
	</columns>
</row>

<spacer size="20"></spacer>

<div class="component-preview-wrapper">
	<h5>Component preview:</h5>
	<div class="component-preview">
<!-- THIS IS MY ISSUE -->
		{{> prop-component-handlebars-name }}
<!-- !THIS IS MY ISSUE -->
	</div>
</div>

<spacer size="5"></spacer>

<div class="styleguide-code">
	<h5>Component implement code:</h5>
	<pre class="language-handlebars">
		{{{{raw}}}}{{> {{{{/raw}}}}{{ prop-component-handlebars-name }}{{{{raw}}}} }}{{{{/raw}}}}
	</pre>
	<div class="code-description">
		{{ prop-component-handlebars-text }}
	</div>
</div>

<spacer size="5"></spacer>

<div class="styleguide-code">
	<h5>Component source code:</h5>

	<div class="tabs">
		<ul>
		    <li><a href="#{{prop-component-id}}Inky">INKY</a></li>
		    <li><a href="#{{prop-component-id}}Scss">SCSS</a></li>
	  	</ul>
	  	<div id="{{prop-component-id}}Inky">
			<pre 	class="js-code-import prettyprint  lang-handlebars" 
					data-source="{{prop-code-inky-path}}"
			></pre>
			<div class="code-description">
				{{prop-code-inky-text}}
			</div>
	  	</div>
	  	<div id="{{prop-component-id}}Scss">
			<pre 	class="js-code-import prettyprint  lang-css" 
					data-source="{{prop-code-scss-path}}"
			></pre>
			<div class="code-description">
				{{prop-code-scss-text}}
			</div>
	  	</div>
	</div>
</div>

<spacer size="20"></spacer>

 

My issue is, that i want to load a partial, as preview of the component, within a each loop with data from the yml file.

But its not really working.

 

I had one working solution:

	{{#with prop-component-handlebars-name as |partial| }}
		{{> (partial) }}
	{{/with}

But if my component is based on a yml file with a each loop to display content (e.g. this.title - inside the component loop), on my documentation is no content displayed for this component. I think its because it takes the data from the document yml file instead of the yml file of its own component.

 

I'll hope that my question is clear enough to understand, my english is not the best :(

 

Any ideas how i could solve this issue? I already googled a couple of hours...

 

THANKS

Tobi

Tobias Feld over 2 years ago

Looks like this is another solution:

{{> (lookup . 'prop-component-handlebars-name') }}

But its still the same issue that the data from the component are not correctly used. Maybe anyone an idea?

Matthias Hormann over 2 years ago

You’d probably need to introduce a new {{include …}} helper since the partials includer {{> partial}} doesn’t support arbitrary file names (and extensions).

Example at https://github.com/helpers/handlebars-helper-include

 

Tobias Feld over 2 years ago

Thank you Matthias Hormann, i'll give this solution a try :)