Is there Natural Templating for Node.js
Natural Templating (like Thymeleaf template engine) is when template page or it's part can be perfectly displayed by a browser as a prototype, without being executed at all.
That is, I have template with .html extension, and I can just open in browser to preview it, and use standard HTML dev tools to edit.
UPDATE: I have added answered, that were added in comments. (Do new StackOverflower users fear to add answers?) Hope to hear from developers, that actually use those things (just add new answer)
github.com/flatiron/plates (answered by generalhenry)
Plates (short for templates) binds data to markup. Plates has NO
special syntax. It works in the browser and in Node.js.
Active
I have a jinja like template engine in the backend.
My frontend sometimes needs to retrieve data from the server and interpolate with the content of a HTML5 template tag.
I could do that with query selectors. But I want something more closer to thymeleaf or mustache without special syntax (especially not to conflict with my backend template engine and not have any issues when presented in the HTML5 template tag).
So I created this:
https://github.com/marcodpt/tint
While this works in the browser (and that's fine for my personal use), it's not difficult to use a DOM API to port it to node or deno.
<html>
<head>
<script type="module">
import compile from "https://cdn.jsdelivr.net/gh/marcodpt/tint#2.0.0/template.js"
const render = compile(document.getElementById("app"))
render({
message: "Hello World!"
})
</script>
</head>
<body>
<div id="app">
<h1 :text="message">Loading...</h1>
</div>
</body>
</html>
{{ mustache }} (answered by etienne)
Logic-less templates.
Available in Ruby, JavaScript, Python, Erlang, PHP, Perl, Objective-C,
Java, .NET, Android, C++, Go, Lua, ooc, ActionScript, ColdFusion,
Scala, Clojure, Fantom, CoffeeScript, D, and for node.js.
Works great with TextMate, Vim, Emacs, and Coda.
I was using Handlebars.
There are actually quite a few template engines in JavaScript and here you can decide what you need.
Related
Summary:
I'm currently migrating a website on Apache + PHP stack over to Node + Express, and would like to know what is the best way/best practice (if there is one) for dynamically injecting meta tags under the new stack.
Details:
Under the existing stack, meta tags are injected dynamically by adding PHP codes into the HTML file directly. As rendering is done on server side, the tags are properly interpreted by Facebook/Google+/whatever web crawlers.
Under the new stack, after doing some research, I've come across two options:
Use template engine like Pug (Jade) to render the HTML with locals. (It seems to be an overkill to rewrite the existing HTML with Pug's syntax though? Can Pug deal with HTML, or I've to consider other template engine like EJS? What template engine do you advise me to explore?)
Use DOM manipulation plugin like Cheerio to inject the meta tags first, before rendering begins.
Between these two options, which one will have a better performance or there is no material difference? Are there any other ways that you'd otherwise recommend? Thanks!
EJS would probably be the simplest one for that and very similar to PHP.
You can also take a look at Mustache and Handlebars for other options with minimal changes to your existing HTML.
with EJS: <html><head><%= yourMetaTags %> ...
with Mustache: <html><head>{{ yourMetaTags }} ...
with Handlebars: <html><head>{{ yourMetaTags }} ...
Also doT.js is very fast.
See:
http://www.embeddedjs.com/
https://mustache.github.io/
http://handlebarsjs.com/
http://olado.github.io/doT/
Parsing the HTML and manipulating it with a DOM API just to insert meta tags would be an overkill in my opinion.
On the other hand if all you need is to insert meta tags then you could make a simple regex substitution, using something like yourHTML.replace('<head>', '<head>'+yourMetaTags); but it could potentially get more complex over time when you need more functionality. After all, everyone has made a templating engine at some point in life.
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 would like to know the possibility to develop custom html tags or custom html attributes to node.js , rather in jade, html or another html template enginer. I was looking at PhantomJS and I don't realize any example that accomplish it, either Cheerio as well. My goal is to make some components to easily usage in any kind of popular html engines. Any direction will be very helpful. Thanks!
Node.js is just a webserver, You need something to parse the custom tags, so its either the template engine that will convert it to valid html, or client side with JavaScript (aka AngularJS directives)
You can write your own filter similar to the example
body
:markdown
Woah! jade _and_ markdown, very **cool**
we can even link to [stuff](http://google.com)
That would give you
<body>
<p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even
link to stuff
</p>
</body>
I'm using Ember.js and Handlebars.js for a project I'm working on at the moment. Server-side is Node.js + express and I make use of the Jade templating engine.
Now, whenever I want to tie actions to DOM elements, I use the {{action}} attribute of Ember.js. Currently, this is how my code looks in Jade:
script(type='text/x-handlebars', data-template-name='frontpage')
div.logo(''='{{action goToFrontpage}}')
The above does work, however, the ''='{{action goToFrontpage}}' part seems somewhat hackish.
Is there any other way of doing this? Perhaps a best-practice when combining Ember.js, Handlebars.js, and Jade?
Sometimes it's better to just use html in Jade.
<div {{action GoToFrontpage}} class="logo"></div>
An other example I see a lot is the strong tag.
.stuff
| This is an
strong important
| message.
You can write this
.stuff This is an <strong>important</strong> message.
I find the second a lot more readable and concise.
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);