In my file I have a call to an external handlebars partial like this
{{> docs/setup/install }}
This works fine. 'install' is the name of the partial.
I want to dynamically call other files using the partial helper. Something like this
{{> docs/setup/{{filename}} }}
This obviously is not working. It is an example of what I am trying to achieve.
How do I pass the dynamic {{filename}} to the include partial helper?
I am on node and using the express-hbs library.
You may want to use "subexpressions".
Refer to the documentation available here : https://handlebarsjs.com/guide/partials.html#dynamic-partials
Related
Trying to learn about Handlebars custom block helpers and conditional helpers, I've created a simple example on jsfiddle. The custom helper returns true but the conditional expression doesn't appear to respond correctly to the value passed out of the block helper
<script id="test" type="text/x-handlebars-template">
<h3>{{title}}</h3>
<p>custom helper returns: {{isCategory}}</p>
<p>conditional result: {{#if isCategory}}yes{{else}}no{{/if}}</p>
<p><em>I would expect the result to be 'yes'</em></p>
</script>
What's not happening properly in this example?
Your conditional {{#if isCategory}} is looking for isCategory in your data object, and since it doesn't exist.. False/No.
The conditional block will not evaluate your custom helper, it will only look in your data object passed in to the template.
I'm trying to pass an array to another template in Meteor.
Why? Because I would like to create a small template for each Bootstrap element, allowing me to reuse components much more easily.
{{> dropdown id="dropdown1" textDropdown="My dropdown!" listItems=["item1", "item2"] }}
This does not seem to work unfortunately.
Any clue? Does what I'm doing even make sense? I'm new to Meteor.
Thanks!
Spacebars is currently pretty limited in what it can accept - you'll need to add a helper to accomplish this:
Template.myTemplate.helpers({
listItems: ['item1', 'item2']
});
And them modify your template:
{{> dropdown id="dropdown1" textDropdown="My dropdown!" listItems="{{listItems}}"}}
Make sure to update myTemplate to the parent template's name.
I have two .hbs files. One contains a basic button and the other contains a button bar that utilizes that {{basic-button}}. I want to pull the first .hbs into the second and then have Assemble render it as a file.
I thought it was as easy as registering the basic-button as a partial and passing it to the button bar page. But it looks like I need to run through my .hbs files, render them and then let assemble do its thing.
Is there an equivalent of handlebars.registerpartials i can use in Assemble
You can register partials with the .partials method...
assemble.partials(['partials/*.hbs']);
Then you can use those partials with normal handlebars syntax (use the filename as the partial name)
{{> basic-button}}
If this isn't what you're looking to do, could you post a repository that I could look at?
Edit
Based on the comments: You can use layouts inside partials (and other template types)
element partials
---
layout: button-bar
---
{{> basic-button }}
button-bar
{% body %}
But I don't think that's what you're trying to accomplish because you probably want multiple "basic-button" partials inside the button bar.
Another option is to use front-matter inside your page to specify the list of buttons and pass it to the partial as the partial's context:
page.hbs
---
buttons:
- "basic-button"
- "advanced-button"
- "menu-button"
---
{{> button-bar buttons}}
Then inside button-bar you can use our built in partial helper to dynamically include the partials from the list:
<ul class="btn-bar">
{{#each this}}
<li class="btn">{{partial this}}</li>
{{/each}}
</ul>
Hope this helps some.
I have a template that contains a second template, I'd like to make the second template variable ie. it can change depending on what I pass as the template name.
<template name="template1">
<div>
{{> template2}}
</div>
</template>
So when my main page shows template1 I want to specify the template to use for template2.
<template name="main">
{{> template1 TemplateArgs }}
</template>
I know how to set up TemplateArgs - it would contain the name of the template I want to use for template2.
Is this possible?
A future version of meteor allows this with the new Meteor UI functionality. Currently you need to do this manually in a different way. See Meteor set overall template context.
Meteor UI
Beware meteor UI is still in a betaish and is a bit buggy. More details on the post in the references
If you use meteor UI (which you can use in preview mode with)
meteor --release template-engine-preview-5
Then you can do stuff like this
Template.main.template1 = function (value2) {
return Template["template2"].withData({foo: "bar", value2: value2}));
}
Then html like
{{>template1 "valueofvalue2"}}
Current Version / Spark rendering
There is a way in the current version of meteor but it wont work with the UI release since Meteor.render will be phased out in favour of using DOM objects
Template.main.template1 = function(value2) {
return Meteor.render(Template.template2({foo: "bar", value2: value2});
}
Then something like this in your html. You might have to play around with the data to get it working but its something like this
{{template1 "value2"}}
References:
https://groups.google.com/forum/#!topic/meteor-core/gHSSlyxifec
https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
http://www.youtube.com/watch?v=aPf0LMQHIqk
Is there a variable passed into every handlebar.js template that contains all the context content that is accessible by the template?
e.g. I'm creating a template, but I don't know all the context content accessible by the template. I want to be able to type into the template {{ debug }} and handlebars.js will spit out all the context content into the HTML
You can use the following code to iterate through this object:
{{#each this}}
{{#key}}: {{this}}
{{/each}}
or a similar piece of code iterating through #root object:
{{#each #root}}
{{#key}}: {{this}}
{{/each}}
Handlebars has built-in helper log.
You just need to set logging level to DEBUG.
Handlebars.logger.level = 0;
Then use helper:
{{log this}}
EDIT: Sorry, this will not write context to HTML, helper uses console.log. For outputting to HTML you need to write custom helper that will use for example JSON.stringify.
Though this question is somewhat old, someone might find this usefull. You can just dump the handlebars current context into plain text with;
{{{.}}}