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
Related
Switching from handlebars to pug I don't know how to populate a dropdown in pug. In handlebars I could do
<script type='text/javascript'>
$('.ui.dropdown').dropdown('set selected', [{{#each trip.tags}}'{{this}}',{{/each}}]);
</script>
Anyone got a clue what's the best practice in pug?
It looks like you're trying to generate JavaScript values as part of your template rendering. The approach you have taken in markdown could cause an XSS attack if this is not properly escaped (or it might just cause values like " to appear as ").
In pug, we recommend using js-stringify when you need to embed template values in a script. To do this, you need to install js-stringify using npm. You then need to include it in your locals. e.g.
pug.renderFile('my-template.pug', {stringify: require('js-stringify')});
Then you can use it as:
script(type='text/javascript').
$('.ui.dropdown').dropdown('set selected', !{stringify(trip.tags)});
N.B. It is only safe to use the !{...} syntax because js-stringify properly escapes the values before rendering.
I am having a problem with gulp-jade: The Jade compiler always adds a value to HTML attributes without a value, which breaks my AngularJS setup. (e.g. div(ui-view) becomes <div ui-view="ui-view"> when I want <div ui-view>.
The problem does not occur with files that have a doctype html, but since I am mostly working with 'partials' that is no help.
I am running .pipe(jade()) without additional options. Apparently gulp-jade supports all Jade API options, listed here, but I do not see which one would apply here.
There is an undocumented doctype option. .pipe(jade({doctype: 'html'})) compiles the template under the HTML5 doctype
For those finding this page who use Grunt, I found that the following works with ui-view.
div(ui-view="")
I'm trying to create some scripts which require moving through a lot of on-the-fly HTML with random IDs. They require getting the parents of an element - but I'm not sure how to implement this in WebdriverJS.
If I access the element I want via a console, I can do the following to get it;
document.querySelector('span[email="noreply#example.com"]').parentNode.parentNode
Is there a way to do this in WDJS? I've looked and can't see anything obvious - it's specifically the parent stuff I'm having issue with. I saw that a possible solution may be xPath however I'm unsure of syntax having never used it before.
Thanks in advance!
I don't know the syntax of WebDriverJS. But the XPath is as below, you need a way to fit it in somewhere.
This is based on your CSS Selector, so please show HTML if needed.
.//span[#email='noreply#example.com']/../..
For example, if you have HTML like this
<div>
<div>
<span email="noreply#example.com">Contact me</span>
</div>
</div>
You can avoid using .. to go up.
.//div[./div/span[#email='noreply#example.com']]
If you have more levels to look up, another handy method would be using ancestor from XPath Axes.
Also, as #sircapsalot brought up, CSS selectors spec doesn't support parent selecting, so XPath is the only way to go, unless you inject JS.
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]]