This works fine:
<h1 class="uk-heading-line uk-text-center"><span>{{processNameUpper}}</span></h1>
{{> process-BUF-labels}}
but now I also want to use a dynamic partial naming like so:
<h1 class="uk-heading-line uk-text-center"><span>{{processNameUpper}}</span></h1>
{{> process-{{processNameUpper}}-labels}}
But sadly this is not allowed.
Is there any way without a complicated partial expression function?
And I really want to have the labels files in separate files.
Related
I'm using handlebars with KeystoneJS and am trying to extend the main import in the default template. At the moment it only includes the {{{body}}} tag imported through the view plus the partials that I'm using.
Is there any way to add a couple of other imports (i.e. intro content, page title, additional scripts). In the jade version on the demo site it just imports it as a content block. Is this a limitation of handlebars?
You can do this with handlebars just fine using partials.
Put your partial in the folder indicated below:
Then in your layout ('default.hbs' in this case) reference the partial like you would normally in handlebars.
<div id="header">
{{> navigation this}}
</div>
The '>' means insert partial.
In this case 'navigation' is the
partial name in the partials folder.
'this' is the data context. Its what you want to do with the 'locals.data' object passed into handlebars by keystone. Using 'this' will pass the whole lot through whereas doing something like 'locals.data.navigation' would pass the navigation object through to the partial making it directly accessible in the partial (good for DRY).
Hope that helps. The partials specific documentiation for handlebars is here if you are interested in looking into a few more things you can do with scope etc http://handlebarsjs.com/partials.html
have some trouble with Expression Engine variable passing in templates.
There is some piece of code:
// query:
{exp:channel:entries
channel="static"
}
// repeating field in a loop
{content_matrix}
<div>
{text_cell}
</div>
{image}
{/content_matrix}
//
{/exp:channel:entries}
I want to move content_matrix field with big inner HTML (example is shorter) sctructure into separate embed template for reusage in other templates.
Tried to build such embed but it doesnt work:
{embed="incl/content_matrix" matrix="{content_matrix}"}
And body of smaller template:
{embed:matrix}
<div>
{text_cell}
</div>
{image}
{/embed:matrix}
In this way it works if you passing single element, like ID, but not for mupltiple element.
Maybe it needs to pass entire entry.
How it can be done?
Thanks.
Have you considered using the Stash add-on?
I imagine you can stash the matrix content dividing between different parts of your html with some kind of separator, then in the embedded template wrap a search/replace for the separators with the proper html around the grabbed stash.
It might be less of a pain to write a quick, custom plugin, though.
Embed variables pass parsed output, not tags. So in your example:
{embed="incl/content_matrix" matrix="{content_matrix}"}
What you're actually passing in the matrix parameter is the full HTML table output of the data in that particular entry (since Matrix fields output a table when used as a single tag).
I think what you actually want to use to prevent repeating yourself is a Snippet. So just make a snippet containing:
{content_matrix}
<div>
{text_cell}
</div>
{image}
{/content_matrix}
And save it as, say, matrix_loop. Then include it inside your Channel Entries loop like so:
{matrix_loop}
I am new to using Jade -- and it's awesome so far.
But one thing that I need to happen is an element with 'itemscope' property:
<header itemscope itemtype="http://schema.org/WPHeader">
My Jade notation is:
header(itemscope, itemtype='http://schema.org/WPHeader')
But result is:
<header itemscope="itemscope" itemtype="http://schema.org/WPHeader">
How can I make sure that I get the right result -- itemscope instead of itemscope="itemscope"?
Sometimes it doesn't work quite right -- like with contentEditable Jade tries to detect html5 doctypes and then does <header itemscope itemtype="http://schema.org/WPHeader"></header> if it finds it. The problem is that if you have templates that you are inserting in the page, it can't tell that it's html5.
What you can do is force html5 compilation by passing in {doctype: '5'} to the options -- did this for require-jade: https://github.com/ibash/require-jade/commit/754cba2dce7574b400f75a05172ec97465a8a5eb
I had the same problem using angular ng-include directive. It gets ng-include="ng-include" and then the include doesn'nt work.
What it works for me is to use an empty string as a value, i.e. ng-include="".
Here is answer from jade developers: you should use
doctype html
in the template.
https://github.com/pugjs/jade/issues/370
I just tried it in a Express.js/Jade project and the result i get is:
<header itemscope itemtype="http://schema.org/WPHeader"></header>
I also tried it in bash and then I get the same result as you.
I'd go with the following suggestion or create an issue on Github.
itemscope="itemscope" will work just as well as just itemscope. It looks like that's the default behavior of Jade. I'd just go with it.
I had the same problem, and the easiest solution in my case was adding doctype 5 at the top of my jade document. That apparently allows Jade to use attributes without a value.
ibash put me on the right track with his answer, so thanks for that
Is there any way to un-render a template with hogan.js. You can just hide it, but that leave's a lot of elements with id's and it can mess up further effects on your site.
I have looked around, but can't find an answer to this. Thanks
hogan.js is a templating language. What means that one can easly render different html markups just using some javascript object. It does not have the purpose of manipulating the DOM.
Lets say you got html like this:
<body>
...stuff...
<div id="div-1">...stuff...</div>
</body>
You could use of course jQuery:
$('#div-1').remove();
Or if it saves trouble you can use pure javascript:
var elem = document.getElementById('div-1');
elem.parentNode.removeChild(elem);
I'm using modx revolution. I'd like to create a chunk called layout that calls other chucks example
Head
header
nav
body
footer
then in my template do something like //open layout tag[[$layout]] [[$layout]]//close layout tag. then inside of the the open close tags append my [[*content]]. this would allow me to reuse my layout template over and over again without having to replicate it in the templates. First question, is it possible, second what kind of syntax would be needed to achieve this goal? I'm rather new to modx and know it's possible with other frameworks, so any help would be appreciated. Thanks.
Sample concept done in Apache Tapestry framework, obviously different syntax, but should give you the general idea of what I'm looking for.
components/Chunks used.
Layout
Header
Nav
Footer
Inside of layout
<html>
<t:Header/>
<t:Nav/>
<t:Body/>
<t:Footer/>
</html>
Inside of Index/Template
<t:Layout>
template body content goes here ex. [[*content]]
</t:Layout>
Hope this helps to clarify.
Your post is not very clear and I think you haven't really taken much time to read up on how MODx works before looking for help.
That aside, I think what you want to do is create different templates, structured more or less like this:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[$footer]]
That might do for your home page, then for internal pages where the layout is a bit different you can create one or more new templates for each layout:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[$sidebar-chunk]]
[[$footer]]
You can even show different layouts using a single template something like this:
[[$header]]
[[$nav]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
[[*parent:is=`6`:then=`
[[$recent-articles]]
`:else=`
[[$sidebar-chunk]]
`]]
[[$footer]]
That should get you started, but you'll soon realise there are multiple ways to do everything in MODx.
You can put your [[*content]] where-ever you want, even inside another chunk, if that's what you mean.
So your [[$layout]] chunk could just be this:
[[$header]]
[[$menu]]
<div id="content">
<h1>[[*pagetitle]]</h1>
[[*content]]
</div>
If you want to make some minor changes in a chunk on a template-basis you could also do something like this in the template:
[[$layout? &customContentBits=`
<h1>[[*pagetitle]]</h1>
[[*content]]
`]]
and your layout chunk could then be something like this:
[[$header]]
[[$menu]]
<div id="content">
[[+customContentBits]]
</div>
That's a placeholder ([[+customContentBits]]) which is set by adding the &customContentBits in the chunk call.
Explained that a tad more with a different use case on my blog some time ago too: http://www.markhamstra.com/modx-blog/2010/10/introducing-element-properties-and-output-modifier/
What you are asking can absolutely be done. In fact, on my website, I even have the same template/chunk combo providing multiple layouts by passing a template variable as a chunk modifier. But anyhow, let's keep things simple.
A quick note on your question., ModX doesn't use start tags and end tags, natively. It's best to stop thinking that way. Instead just place things where you want to place them. Resource variables can go in any chunk, as each resource is unique.
Create your Chunks:
First, start with the simple ones. Create your Header, Footer, and Navigation. Next, create your Body. Inside the Body, make sure to include your [[*content]] (no... it doesn't have to go into the Template. Finally, create your Layout with the following code:
[[$header]]
[[$navigation]]
[[$body]]
[[$footer]]
Create your Template:
Your template can now be as simple as [[$layout]]. You're done.
Note
While you can do this with ModX, understand that the power of ModX is that you can have multiple templates and chunks depending on the type of content you have. Singularizing everything like this really takes away a major advantage of using the platform.
Mark Hamstra more or less gave you the answer, but just to clarify: Any snippet, chunk or output of some sort in Modx can take parameters. Chunks and snippets especially can make use of these params easily. From what i understand you want to have all your templates call [[$layout]] and nothing else.
The layout chunk in turn looks like
[[$header]]
[[$navigation]]
[[$body]]
[[$footer]]
On this you simply build and add your params, nesting them down from the top like
[[$layout? &useNavigation=`1`]]
(And continue passing the param in your layout chunk)
[[$header]]
[[+useNavigation:is=`1`:then=`[[$navigation]]`]]
[[$body]]
[[$footer]]
Another way of accomplishing the same behaviour would be to use a single template to which you have connected a series of template variables that decide how the template looks like. You might have template variable called useNavigation of checkbox type. If you check this through the resource editor it will be passed to your $layout chunk directly without having to add params into the $layout chunk call.
[[$layout]]
(Just call layout normally and add the TV checks to the layout chunk directly.
Note the difference between calling a TV and a placeholder, + vs *)
[[$header]]
[[*useNavigation:is=`1`:then=`[[$navigation]]`]]
[[$body]]
[[$footer]]