I have a hbs file that contains following
//some ohter code
-------------------------------------
{{#each items}}
<li>
{{name}}
{{#if items}}
<ul>
//partial should go here
</ul>
{{/if}}
</li>
{{/each}}
---------------------------------------------------
And I want to use same section recursively replacing //partial should go here. How can I do that? Appreciate any help
Ember used to have parital, render and include template tags, which they are trying to get rid of however.
Now, probably the best way is to make use of components. If you are on ember-cli, just open your terminal and type ember g component my-include. It generates a *.js and a *.hbs file (naming depending on whether you are using pods or not).
Then you put the template code you want to use multiple times in the newly created *.hbs file, and then in your existing template code:
{{#if items}}
<ul>
{{my-include}}
</ul>
{{/if}}
You might want to take a look at: https://guides.emberjs.com/v2.9.0/components/defining-a-component/ for more information
You can also look at this sample working twiddle.
Related
How to use parameter in handlebar partial I am using grunt-assemble and cant find anything in docs
For Example I will create a partial name heading and use it in my template
<h1 class="tac mt-80 underline">
{{heading}}
</h1>
<body>
{{> heading "Test"}}
</body>
unfortunately, thats not possible with grunt-assemble out of the box.
Their recommended way is to use the parseJSON helper for that:
{{#parseJSON '{"heading": "TEST"}'}}
{{> heading }}
{{/parseJSON}}
But you should take a look at the current implementation of assemble, which includes a updated version of Handlebars (which provides your wished functionality). It seems like they moved away from Grunt in favor of compatibility with Gulp.
I'd like to literally display a template as code in a meteor app. Something like below:
<template name="current-template">
<pre>
<code>
<template name="template-should-display-as-code">
{{> TMCODE shouldDisplayAsIs}}
</template>
</code>
</pre>
</template>
The template inside the code section should be displayed as code. It shouldn't refer to another template. It is illegal syntax anyway.
Is there anyway to achieve it?
Thanks.
This might help..
Display source code in meteor applications
http://www.meteormade.com/display-source-code-in-meteor-applications
I use assemble.io to generate some static files for a simple webpage.
Now i would like to define a list of partials in YAML Front Matter that should be included in the generated page.
I want this
<div class="slides">
{{>slide-intro}}
{{>slide-welcome}}
{{>slide-goodbye}}
</div>
to be replaced by something like this:
---
slides:
- slide-intro
- slide-welcome
- slide-goodbye
---
<div class="slides">
{{#each slides}}
{{>this}}
{{/each}}
</div>
So, I want to use the variable content stored in this(e.g. slide-welcome) to be used as the name of a partial to be included.
I see that using {{>this}} is not working, but i have no clue where to look for the solution.
Can anybody help me out?
Handlebars 3 introduced Dynamic Partials and you would use them like this:
---
slides:
- slide-intro
- slide-welcome
- slide-goodbye
---
<div class="slides">
{{#each slides}}
{{> (lookup ../slides #index) }}
{{/each}}
</div>
However, assemble 0.4.x is using Handlebars 1, so switch to grunt-assemble, which uses Handlebars 3. grunt-assemble is the same code based, it's just been moved to reflect that it's a grunt plugin.
Let's say that I build all my handlebar templates into a build folder as follows:
gulp.src('./source/pages/**/*.hbs')
.pipe(plugins.consolidate('handlebars', config))
.pipe(plugins.extReplace('.html'))
.pipe(gulp.dest('./build'))
.pipe(/* ??? */)
In the last pipe(/* ??? */), I would like to create an index.html file with a list of links to build/**/*.html using the following template:
<ul>
{{#each files}}
<li>
{{this}}
</li>
{{/each}}
</ul>
How can I achieve this?
I would use an approach like gulp-concat, but create a list of file paths instead of buffering the contents: https://github.com/wearefractal/gulp-concat/blob/master/index.js
You might be able to use the gulp-wrap plugin to solve this:
.pipe(wrap(' <li>\n <%= file.path %>\n </li>'))
.pipe(concat('index.html'))
.pipe(wrap('<ul>\n<%= contents %>\n</ul>'))
I think this might be too hackish, but it might work. The biggest issue I see is that file.path probably doesn't link the way you want it to.
I have a mongo document structure as follows:
Gallery
--- Sub-Gallery
------ Image
------ Image
------ Image
--- Sub-Gallery
------ Image
------ Image
.
.
.
Gallery
.
.
.
I would like to represent it on screen. The naive implementation would be:
<name template="gallery">
{{#with get_specific_gallery_helper))
{{#each sub_gallery}}
This is a gallery {{name_sub_gallery}}
{{#each image}}
Something {{name_image}}
{{/each}}
{{/each}}
{{/with}}
The problem with this implantation is that every time a single image data changes the entire Gallery template is re-rendered.
Is there a better way to do it?
Is it possible to limit the scope in every step?
I would like to keep the db structure as is (no normalizing).
Why do I consider it a problem?
First of all it simply does't make sense. Being more practical, I have specific event handlers that are invoked whenever a Gallery/Sub-Gallery/Image are rendered (e.g. fade in the images when loaded). Rendering everything all the time makes it much harder to handle these actions.
Consider reactivity isolation:
<template name="gallery">
{{#each sub_gallery}}
{{#isolate}}
This is a gallery {{name_sub_gallery}}
{{#each image}}
{{#isolate}}
Something {{name_image}}
{{/isolate}}
{{/each}}
{{/isolate}}
{{/each}}
</template>
This localizes changes in the isolate blocks to their own sort of planet so everything around them remains the same and untouched and it still remains reactive
You might have to test it with your document structure though, because each documents index may change when you update it if you store subitems with arrays instead of associative arrays with keys