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.
Related
In AEM 6.2, I want to do this in handlebars.
<sly data-sly-resource="${'title' # resourceType='myproject/components/content/common/title'}"/>
Specifically, I overlaid the qnaforum.hbs and need to include it in there. The official documentation(link) says the correct way to do this is:
{{include this.id path="title" resourceType="myproject/components/content/common/title"}}
When done this way there are three problems:
The component appears, but then disappears from the page.
I get the warning "Forcing resource type is not supported when sling including on the client side"
There is a failed(404) GET request to http://localhost:4502/content/myproject/qna-index-page/jcr:content/qna-parsys/qna/title.html in the browser console (like it's trying to find the renderer for the title resource at that path).
In the same qnaforum.hbs file, Adobe is using the same include for their subscriptions component and it seems to work fine.
{{include this.id path="subscriptions" resourceType="/libs/social/subscriptions/components/hbs/subscriptions"}}
Does this type of include only work for Social Communities components? If so, how can I include a custom resource in the handlebars template?
I helped some one else who was facing a similar issue. I am attaching the code snippet that caused the issue you are facing (disappearing QnA list), and the fix for that.
The overlaid QnAForum component looked like this
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- Other QnA code --}}
</div>
But code should be like this
{{#if-wcm-mode mode="EDIT" }}
<div class="scf-includeClientLib">{{includeClientLib js="cq.social.commons.widgets, cq.social.toggle"}}</div>
{{/if-wcm-mode}}
<div data-module="qna-index" class="scf scf-forum scf-qna " data-component-id="{{id}}" data-scf-component="social/qna/components/hbs/qnaforum">
{{!-- moving line1 from previous code snippet inside this parent div}}
{{include this.id path="qnaforum-top" resourceType="custom/components/modules/qnaforum-top"}}
{{!-- rest of QnA Code }}
</div>
The change I made is, moving line1 in first code snippet into line 5.
The JS console does say missing HTML, but it gets included though. The reason for console error is the way include works.We try to fetch the html, and if we fail in fetching the HTML, we ask to sling to resolve the component.
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.
I've got a very simple template problem going on that appears to be similar to this guy's problem, though I've tried to build a simple example to demonstrate the problem and hopefully have someone explain to me how to fix or work around it.
Although as I'm doing some online research, it may be that the official documentation is out of date with the code. The reason I haven't bought into accepting that just yet is that the problem seems to have existed for a while, the dates on such articles in forums appears to be fairly old, and there's talk of it being fixed. There's also talk the feature is gone. What's the new way, if there is one?
I'm using Meteor 0.9.0.1 with iron:router 0.9.1. Specifically, I set up my project like this:
$ meteor create ironTest
$ cd ironTest
$ meteor add iron:router
$ meteor
Pointing my browser at http://localhost:3000/ as instructed, shows the default project. So far so good.
Now make ironTest.html contain this:
<body>
<h1>Before</h1>
{{renderRouter}}
<h2>Afterward</h2>
</body>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
Make ironTest.js contain this:
Router.configure({
autoRender: true // we will experiment with this Boolean shortly
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
If you go to the routes http://localhost:3000/hello and http://localhost:3000/goodbye, you'll see the templates correctly render as expected and documented, appended to the <body> element, so it appears after the <h2> element.
According to the current documentation for iron:router, one should be able to set the autoRender property to false, and the template should no longer be appended to the <body> element, but rather be injected where the Handlebars (okay, Spacebars) element {{renderRouter}} is, that is, between the <h1> and <h2> elements.
When I try this, visually it doesn't do anything. Opening a JavaScript Console to look at errors shows none. Although, by deliberately going to an invalid route it will show a missing template router exception, showing the routing code is indeed working.
Does anyone know how to coerce the code above into working?
For the curious, I've got a working simplistic equivalent that might be of use to others working this problem.
This new ironTest.html uses a template (for a layout) with no <body>:
<template name="main">
<h1>Before</h1>
{{> yield}}
<h2>Afterward</h2>
</template>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
This ironTest.js instead uses a layout:
Router.configure({
layoutTemplate : 'main'
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
It's worth an aside that this solution doesn't work for me, as I don't want a global layout, and have concern that riddling layouts in the route themselves is a tighter coupling than desired for my purposes.
I'm currently looking for a way to dump debugging log information from the Router as it performs transitions, but that's another story.
I have one form, something like that:
<html>
<head>
<!-- Some css file included here -->
</head>
<body>
<!-- Form parameters like action, method omitted for simplicity-->
<form>
<p class="someTextClass">msg[code.text]</p>
<input class="someInputClass" type="text"/>
<button class="someButtonClass">msg[code.button]</button>
<p class="someHelpTextClass">msg[code3.help]</p>
</form
</body
</html>
But currently there are a lot of conditions statements like "(condition) ? messageOne : messageTwo" and "rendered" attributes. But I want to switch all text in tags and related css classes simultaneously (and not to lose i18n). I want to set a parameter in one place and switch all css and text according to it automatically. It there something similar in JSF? When I learned Spring there is something like themes in it, is there theme analog in JSF?
P.S. If something unclear in my explanation please write a comment and I"ll update the question.
Can you upgrade to JSF 2.2? The notion of resources and contracts is what you are looking for.
Alternatively, you can potentially fetch the appropriate theme style from a backing bean:
webapp/
resources/theme1/css/styles.css
resources/theme2/css/styles.css
<h:outputStyleSheet library="#{someBean.theme}" name="css/styles.css"/>
Since outputStyleSheet can take an EL for the name as well, you can look at pushing that code to the bean as well.
For the pageTemplate itself, you should probably look at fetching that information from a bean.
Hope that helps.
Google XML Pages say they support "standard html as long as it's formatted as xml" but they seem to only support html 4.0. The namespace used for supporting html is http://www.w3.org/1999/xhtml and generating output from a gxp that contains elements like <header> <nav> or <footer> complains that the element is unknown in the http://www.w3.org/1999/xhtml namespace.
Is there some different namespace I should be using or do gxps really only support HTML 4?
Here's a reference example gxp file where removing the wrapping header tag works just fine:
<gxp:template
name='com.example.gxps.Test'
xmlns:gxp='http://google.com/2001/gxp'
xmlns='http://www.w3.org/1999/xhtml'>
<html>
<body>
<header>
<b>
<gxp:msg>Hello,</gxp:msg>
<br/>
<gxp:msg>World!</gxp:msg>
</b>
</header>
</body>
</html>
</gxp:template>
As is though, it'll output something like:
java/com/example/gxps/Test.gxp:7:5:7:5: Unknown element <header> (in http://www.w3.org/1999/xhtml namespace)
GXP must have an (old) version of the Namespace definitions, built into it.
It appears that HTML5 and HTML4 use the same namespace, so there's no different namespace you need to use in your GXP pages. This is just an issue of updating/ adding the internal GXP definitions.
Download the source code & find where the definitions are! Ideally you can post/commit the updates back to the GXP project.
(I and other people are interested in GXP myself, so.. this would be really good work to do.)
Let me know how you go!