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.
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 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.
when I start meteor like this:
meteor --production
I get a blank page where my app should be and the following error shows up in my browser console:
No such function: navClassName
However if I start meteor normally like this:
meteor
My app runs without problem.
What could be the problem? Do meteor template helpers need to be loaded differently during production?
Relevant files:
client/navigation/navigation.html:
<template name="navigation">
<ul class="nav navbar-nav">
<li class="{{navClassName 'home'}}">
home
</li>
<li class="{{navClassName 'blog'}}">
Blog
</li>
</ul>
</template>
client/navigation/navigation.js:
Template.navigation.helpers({
'navClassName': function (route) {
if (Router.current()) {
return Router.current().route.options.navbarSelected.search(route) != -1 ? "active" : "";
}
}
});
Move navigation.js to the client/lib directory, or at least the Template.navigation.helpers part and fix/remove any other JavaScript that is causing errors.
I wish I could elaborate more, but this issue seems to be related to the file load order. Files in the lib directory are loaded first and moving the helpers there solved the problem for me.
A typical file structure can be found in the documentation. See the comments in the Example File Structure to learn about some of the special behaviors.
While this may work for you, finer control over dependencies can most easily be achieved through packages, as explained in this other answer from SO. This is specially necessary for code that should be available to both client and server.
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.
Im using Jade for copiling to valid handlebars html, which will be used in Meteor. I need the resulting html to look like this:
<input type="checkbox" {{#if this.isImportant}}checked{{/if}} title="Mark as important" />
The only way I know it can be achieved is to insert the desired html directly into the jade file. But it doesn't seem to be the right way to do it.
I hope you can show me the right jade code for achieving this.
Thanks!
The straightforward but very repetitive way is just to do this:
{{#if this.isImportant}}
input(type='checkbox', title='Mark as important', checked)
{{else}}
input(type='checkbox', title='Mark as important')
{{/if}}
If you had several of these on a page you could define a mixin to avoid typing all of that out. Alternatively you could use jquery to set/unset the checked property as appropriate.