Im using Jade for copiling to valid handlebars html, which will be used in Meteor. I need the resulting html to look like this:
<input type="checkbox" {{#if this.isImportant}}checked{{/if}} title="Mark as important" />
The only way I know it can be achieved is to insert the desired html directly into the jade file. But it doesn't seem to be the right way to do it.
I hope you can show me the right jade code for achieving this.
Thanks!
The straightforward but very repetitive way is just to do this:
{{#if this.isImportant}}
input(type='checkbox', title='Mark as important', checked)
{{else}}
input(type='checkbox', title='Mark as important')
{{/if}}
If you had several of these on a page you could define a mixin to avoid typing all of that out. Alternatively you could use jquery to set/unset the checked property as appropriate.
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.
I'd like to literally display a template as code in a meteor app. Something like below:
<template name="current-template">
<pre>
<code>
<template name="template-should-display-as-code">
{{> TMCODE shouldDisplayAsIs}}
</template>
</code>
</pre>
</template>
The template inside the code section should be displayed as code. It shouldn't refer to another template. It is illegal syntax anyway.
Is there anyway to achieve it?
Thanks.
This might help..
Display source code in meteor applications
http://www.meteormade.com/display-source-code-in-meteor-applications
I'm trying to get code highlighting to work for a simple blog built with jekyll. I want to be able to do code highlighting within posts written in markdown so I enabled redcarpet as markup language. This works all fine, the code gets formatted in <pre></pre> tags and all the various elements of the code get corresponding classes. e.g.
<span class="n">function</span>
<span class="n">saySomething</span>
<span class="p">()</span>
<span class="p">{</span>
etc.
This is awesome but this doesn't give us of the actual highlighting (color) yet. So I suppose there must be some css ready to copy and paste which actually does the styling of the different code elements. Or am I missing something completely?
I looked into some code highlighting libraries like prettify or prism but these do their own formatting with javascript in the browser. But since redcarpet already does the heavy lifting work of formatting the code it is not necessary doing it again.
Any hints?
You need some CSS magic. Use this one or pick one from here.
You can create the CSS with the highlighter itself
rougify style > rouge.css
Or
coderay stylesheet > coderay.css
I like to share the solution as I faced and it took much time to get rid of this issue. Default syntax highlighting is very poor in Jekyll. Like David said, You really need some CSS magic. Check this gist to solve the syntax highlighting problem.
Let's say that I build all my handlebar templates into a build folder as follows:
gulp.src('./source/pages/**/*.hbs')
.pipe(plugins.consolidate('handlebars', config))
.pipe(plugins.extReplace('.html'))
.pipe(gulp.dest('./build'))
.pipe(/* ??? */)
In the last pipe(/* ??? */), I would like to create an index.html file with a list of links to build/**/*.html using the following template:
<ul>
{{#each files}}
<li>
{{this}}
</li>
{{/each}}
</ul>
How can I achieve this?
I would use an approach like gulp-concat, but create a list of file paths instead of buffering the contents: https://github.com/wearefractal/gulp-concat/blob/master/index.js
You might be able to use the gulp-wrap plugin to solve this:
.pipe(wrap(' <li>\n <%= file.path %>\n </li>'))
.pipe(concat('index.html'))
.pipe(wrap('<ul>\n<%= contents %>\n</ul>'))
I think this might be too hackish, but it might work. The biggest issue I see is that file.path probably doesn't link the way you want it to.
I am trying to insert
onclick="countCheckboxes()"
within the input tag. Is there any way to do this in CSS? I tried the following, but didn't work:
input[type=checkbox]:after {
content: "onclick="countCheckboxes()"";}
So that it would eventually output this
<input type="checkbox" onclick="countCheckboxes()">
This is for a Wordpress form. Maybe I could add something in the functions.php template to enable me to do this?
You cannot generate Javascript in css. Please refer to this for more information: Using Javascript in CSS
I am guessing that you want to keep your markup clean of JS? If so, the best thing would be to abstract the JS from your markup in a separate js file. There you can navigate the dom and append functions whichever way you require. You can do this with either vanilla Javascript or a JS framework(like Jquery) which simplifes the process a lot.
I'm happy to set up a demo if you wish to learn how.