I have a folder structure like so:
- components/
- foo/
- index.js
- foo.handlebars
- foo.scss
- bar/
- index.js
- bar.handlebars
- bar.handlebars
In order to resolve component partials conveniently I provide a helper that will find a correct path, translating bar into components/bar/bar.handlebars. This helper is called getPartialForTemplate.
In my template, I do:
{{> (getPartialForTemplate 'foo') some=props}}
This is fine, but when I need to use the resolved template as a block I come across an issue:
{{#> (getPartialForTemplate 'foo')}}
<p>Some text here..</p>
{{/WHATGOESHERE???}}
This seems like a syntax flaw in Handlebars, as I'd expect its syntax features to work together. Is there a way to do this?
There's an open issue on github, the suggested workaround is this:
{{#>( lookup . 'intendedTemplate' )}}
No template matched for "{{intendedTemplate}}"
{{/undefined}}
Related
I am working on a template for a react component with plop.js and I am using conditional handlebars to render some content conditional upon an argument passed along with the command used to generate the content. Here is the conditional content of the template:
{{#ifCond "withStyles"}}import * as styles from "./{{pascalCase name}}.styles";{{/ifCond}}
When I use the line above, it returns "cannot read properties of undefined (reading "replace") which might be due to using {{pascalCase name}} inside the {{ifCond}} so how can we achieve the same thing in a correct way as it seems wrong.
Thanks in advance.
Is there a way to do the following in NextJS?
/route1
/translatedRoute1
/route2
/translatedRoute2
Having this folder structure
pages/
[route1]/
index.js
[route2]/
index.js
This will give an error because [route1] and [route2] will will both match in all circumstance.
The idea is that I want to render the same component for both English and Romanian.
/about-us
/despre-noi
-> I want this to render the same component as "/about-us"
This can be achieved with
/en/about-us
/ro/about-us
But this is not the desired effect.
The desired effect is to change the slug for different languages
I think you'll have to use some plugins as such an advanced configuration is not available out of box.
This seems to me like what you need:
https://github.com/vonschau/next-routes-with-locale#how-to-use
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 template I have set up as my layout using iron-router:
Router.configure({
layoutTemplate: 'main'
});
Within this layout, I have a line of html that I would like to be changed on certain routes.
My ideas is doing something like:
{{#if landing }}
<div id="page-wrapper">
{{/if}}
However, how do I implement this for a certain route? I want this variable to be true on every route except for 1.
I think that this kind of "change the template based upon what route I'm on" logic fits best into the use of a template for that route (and any others that will make this same change. Depending on the change required, you may be able to call in your base Template into the modified template.
Example:
Router.route('/yourSpecialRoute', function(){
this.layout('OtherLayout');
});
See the Layout docs - I borrowed the syntax of Setting Region Data Contexts
Having said, if you prefer not to switch layouts per route, consider setting a data on your route (something like {data: item} as shown here in the iron:route readme which can then be read by a global helper (Template.registerHelper syntax) - this will at least make it consistent across your routes / templates.
Is is possible to define regions in the template, that would pull content from the page?
Let's say I have in my template the following structure:
<div class=sidebar></div>
<div class=content></div>
And from the page content, I would like to pull some html content to the sidebar, and other content to content div.
Is this possible?
With Swig as the Engine
Yes, this is possible. Seehttps://github.com/assemble/boilerplate-swig, in particular, this example, which shows how to use {% macro %} tags to accomplish what you're asking about.
If you want to use Swig, be sure to look at the readme as the assemble-swig repo as well. You have to register swig as the current engine in assemble:
assemble: {
options: {
engine: 'swig'
}
}
With Handlebars as the Engine
If the sidebar content will always be the same, on every page then you can use partials for this. Even if the URLs or active classes change on each page, this should work.
However, dynamic content using template or "block" inheritance, e.g. extend can be achieved with Handlebars helpers.
But since layouts are used with assemble this is a bit trickier to do with "out-of-the-box" helpers. To clarify, just about any helper I can think of will work great with assemble out-of-the-box, except for this - specifically because of how layouts work.
My suggestion is that you add to the existing feature request(s) for this on assemble and/or the handlebars-helpers project to add your use case and thoughts on what you want to achieve:
https://github.com/assemble/assemble/issues/38
https://github.com/assemble/handlebars-helpers/issues/16
#jonschlinkert You should update assemble's documentation, cause start with Assemble isn't so easy and a lot of things are little hidden.
So Luis, you can try this method, which currently works great for me too!
Assemble: Multiple points of content insertion in layout?