we use handlebars precompiled templates in a web app. one of our elements broke recently - incorrect HTML was being used in a certain location. When looking at the precompiled js, I can see that elements are missing. the HTML that is precompiled is quite large and complex with lots of handlebars operators. Here's a very simplified version:
{{#if isGeneric}}
<!-- SEARCH FOR ME-->
<td class="empty"> </td>
<td class="empty"> </td>
<!-- THE END FOR ME-->
{{else}}
<td class="description"><p id="{{productId}}" isGeneric="{{isGeneric}}" productType="{{productType}}" class="bluetext productid_opener">{{description}}</p>
<td class="something">{{productName}}</td>
{{/if}}
This snippet in the HTML is very similar to another snippet (if that makes any difference).
When I precompile this, and search for the HTML in the generated programXX, I can't find the code anywhere (e.g. "SEARCH FOR ME"). I notice that the handlebars programs before and after that specific section of code are numbered with a gap. e.g.:
function program52(depth0,data) { // find elements in the condition just prior to the "if" above }
function program54(depth0,data) { // find elements from HTML in condition just after the "if" above }
so from that I would assume that the function program53 contains the relevant code, but why is it not included in the generated HTML? How does handlebars determine what to include or exclude in the HTML?
I posted https://github.com/wycats/handlebars.js/issues/452, which was actually a dupe of https://github.com/wycats/handlebars.js/issues/428.
The issue is resolved and will be available in npm soon.
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.
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.
In TinyMCE, when I edit HTML code (using code plugin) and delete closing tags it will automatically add them right after clicking OK.
For example a piece of code like
<table>
<tr>
<th>Foo</th>
</tr>
becomes
<table>
<tbody>
<tr>
<th>Foo</th>
</tr>
</tbody>
</table>
I find this unwanted in my usecase but I cannot figure out how to turn it off.
I've already seen this question and tried these options with no result:
forced_root_block: false,
verify_html: false,
verify_css_classes: false,
cleanup: false,
cleanup_on_startup: false,
fix_list_elements: false,
valid_children: '+body[style],head[style]',
valid_elements: '*[*]',
My TinyMCE version is 4.3.11.
TinyMCE is an awesome addition to the community, with that being said it was meant for users that do not regularly code in HTML. If the HTML tags are not auto generated and one of your users did not specify the html on the page, the page would not look correct. This is why TinyMCE has an auto clean on start to clean up HTML code.
Anyway to disable the auto html you need to disable the verify_html : false, on newer editions you might not be able to disable validation but you can define how TinyMCE will treat html tags. as some tags you will want to keep like the <h1>,<h2> ect.., here is a fiddle and the link to the forum post.
I hope this helps you
EDIT:
MAybe a code editor would suit you better. CodeMirror CodeMirror is a JavaScript component that provides a code editor in the browser. When a mode is available for the language you are coding in, it will color your code, and optionally help with indentation.
The idea is to use a single input, Fullpage plugin, and HTML comments <!-- like this one --> as dividers.
TinyMCE preserves HTML comments, but they are not visible in editor. Only in Code view.
There are so many reasons why you might want to disable the auto closing of tags. For me its because I have to copy paste a ton of text content then mark it up. So I get this...
<p>
</p>Airstream hitching is a much longer and more complicated...
when I type the opening p tag next to the word Airstream.
I have resorted to typing all the closing tags first. Telling people the 8million reasons why this is somehow good for them is just lame. Who cares why they want to disable this? We don't all need WP and everything else to protect our code from ourselves.
I'm trying to add static site generation to a site in order to make it more organised and easier to contribute to. The index file has a section with with an unordered list and a number of list items that all share the same formatting. I would like to dynamically load these list items from a folder of markdown files.
I'm trying to do something like
{{forEach file in the folder}}
<li>
<div class="container">
<div class="display">
{{markdown content of the file}}
</div>
<div class="code">
<pre>
<code class="language-javascript">
{{ string from YFM in markdown file }}
</code>
</pre>
</div>
</div>
</li>
{{/forEach}}
I don't actually want each markdown file to be assembled into it's own page in my dist folder, just used as a dynamic collection of partials for my index file.
Is this possible?
These two parts of an apparently never finished tutorial explain how to use markdown files as a dynamic collection of partials to integrate on the index site:
http://www.andismith.com/blog/2014/02/getting-started-with-assemble/
http://www.andismith.com/blog/2014/02/creating-a-list-of-posts-in-assemble/
Inside the loop that's iterating the md files I used this construct to get the yfm-stripped content "included" as content on the index site (took me quite a while to figure out):
{{#markdown}}
{{page}}
{{/markdown}}
Also refer to the documentation on Collections on http://assemble.io, but careful, there's some conflicting information out there as to the options hash for collections (name: posts vs. name: post, that is, singular vs. plural and autoinflection vs. inflection: post, but bottom line: stick with the variant in the links above :))
I learned about Custom parameters and expressions in Dreamweaver MX templates.
So I tried adding them in my DWT TBB, like this.
<!-- TemplateParam name="border" type="number" value="1" -->
##border##
<table>
<tr>
<td>##(border)##</td>
<td><!-- #TemplateExpr expr="border" --></td>
</tr>
</table>
But I am getting a blank output without any error.
I want to add variables to my Dreamweaver TBB and get their values. Can anyone suggest if there is any other approach?
Unfortunately Tridion DWTs only share some syntax with the full Dreamweaver templates, so the above syntax will not work.
There is however a way to set variables, which is well documented here:
http://www.tridiondeveloper.com/get-and-set-variables-in-dwts