Wondering if there is a templating engine like EJS for NodeJS that doesn't break the original template HTML through its use of parenthesis.
In EJS, for example, one might use the following to insert specific data into the HTML template:
<script>
window.$data = <%- JSON.stringify(data, null, 4) %>;
</script>
Note that the <%- %> parenthesis breaks the source HTML file, rendering it useless for quick-fire testing in situations when your want to temporarily drop the use of the EJS parser.
Ignoring disputes of usefulness for a moment, are there any good data-injection libraries for Node which don't break the template? Or, dare I say, for the simple injection of a stringified object into a certain <script> element, would a regular expression be out-of-the-question?
As you know, EJS would break HTML with it's '<% >' , and the syntax of it looks much like ASP.
If you want a new template which not break HTML, and has a nice coding work flow, you can try this:
Github: https://github.com/eshengsky/saker
It's my personal open source project named Saker, it enables a really compact and expressive syntax which is clean, fast and fun to type.
Here's the preview:
<span>#name</span>
#title
Related
I've got an HTML document template.html which looks something like:
<div id="Foo">
<span class="Bar"></span>
...
</div>
Which I use as a template to construct some DOM for a component in Javascript.
At first, I just added it to my page example.html by copy-pasting the markup and wrapping it inside of a <template> tag. Then in my Javascript I constructed a clone to add it to the page by doing something like:
var myTemplate = Document.getElementById('#myTemplateId').cloneNode(true);
Document.getElementById('#newParent').appendChild(myTemplate, true);
While this works, I obviously don't want to have to copy and paste my templates over to be able to use my component.
What I would like to do is somehow package my template markup in with my Javascript. I still want to keep my Javascript and Markup separate for development and sanity, but at build time (I'm using GruntJS as my task runner) for the component I want to combine them somehow so they can be packaged in one, easy to link to file. What I mean by that is I want some way to package the template in with my Javascript, as Javascript. That said, I guess my broader question is:
How can you save/package Markup into a Javascript file or object (JSON) so that it can be used as a template to generate DOM in Javascript later?
The closest I have come to finding a potential solution was to convert the Markup document template.html to a string, save it to a variable, and then add it to a temporary element via .innerHTML and then convert it to make it a DocumentFragment. While that could work, there has to be a better way, and converting the Markup to a string doesn't feel right.
Update:
I know through my research that the trend of the industry is moving to HTML imports. However, it's not widely supported yet, so in the meantime, I still want to be able to package my templates into my js.
I am creating a web app that requires me to render new elements on the page many, many times. It is getting out of hand for me to add HTML by putting it into a Javascript string. Mostly because it's hard to edit it especially when it spans multiple ways. What's the best solution for this? And what's the best way to organize this stuff because I feel like I am going to have a huge page full of JS "subelements".
There are a huge number of JavaScript templating engines available. Some of the more popular ones include:
Mustache
Handlebars
Underscore
jQuery.template
Most work by compiling your template text into a function that can be called with an object containing the data to be interpolated.
For example (using underscore.js):
var myTemplate = _.template("Hello <%= person %>");
alert(myTemplate({person : "egidra"}));
Here is a link about linked.in and templates.
I would use a js template engine. So no need to use html strings in the js. Look at the documentation of the templates. They all explain the use very well.
You can try something like http://handlebarsjs.com/ or http://mustache.github.com/.
It would be useful to have a Coffeescript include function so it could load the external mustache templates when compiling in javascript and not clutter the coffee files.
Actually you can load .mustache files at runtime but you need to call them with an ajax request with some performance penalities involved.
I would like to precompile some static mustache templates and include them in generated javascript function that could be Stitched and compressed in a single file.
Is there a project or a script for that?
I think this solution for you, javascript template precompiller for mustache and othe template engines https://github.com/kupriyanenko/jsttojs
for example, use with command line
jsttojs templates compiled/templates/index.js --ext mustache --watch
or use solution for grunt, grunt-jsttojs
First of all you can use something like this:
<script type="text/x-mustache" id="tid...">
... mustache template ...
</script>
to include your templates in dedicated script blocks rather than as strings in code.
getElementByID() + innerHtml() will give you its source that you can use.
About the Mustache in general - you cannot compile it strictly speaking. Templates get interpreted each time you "instantiate" the template.
If you do need to compile them then consider use of my Kite engine:
http://code.google.com/p/kite/ or any other compileable templates:
http://jsperf.com/dom-vs-innerhtml-based-templating/99
Absolutely, this is something we do where I work. All the templates go in a single html file and get's inserted into the dom at build time. Each template is stored in a script tag of type unknown so the browser just ignores it. Then you can reference them using selectors.
<script type="unknown" id="id_of_template">
<ul>
{{#words}}
<li>{{.}}</li>
{{/words}}
</ul>
</script>
render = (template) ->
view =
words: [ 'hello', 'there' ]
template = $('#' + template).html()
html = Mustache.to_html template, view
John Resig has a good article on the technique http://ejohn.org/blog/javascript-micro-templating/
I'm looking at doing something similar. I haven't tried this yet, but it seems like you could use Node.js and Mu, the Mustache build for Node.js, to do this. Pseudo-JS code...
var compiledTemplate = Mu.compile("myTemplateFile.html")
fs.writeFile("myCompiledTemplate.js", compiledTemplate.toString());
Twitter's library Hogan.js does the job.
You can render a template string included directly in your source using Mustache.to_html(), if that helps.
I just stumbled upon something I've never seen before. In the source of Backbone.js's example TODO application (Backbone TODO Example) they had their templates inside a <script type = "text/template"></script>, which contained code that looks like something out of PHP but with JavaScript tags.
Can someone explain this to me? Is this legit?
Those script tags are a common way to implement templating functionality (like in PHP) but on the client side.
By setting the type to "text/template", it's not a script that the browser can understand, and so the browser will simply ignore it. This allows you to put anything in there, which can then be extracted later and used by a templating library to generate HTML snippets.
Backbone doesn't force you to use any particular templating library - there are quite a few out there: Mustache, Haml, Eco,Google Closure template, and so on (the one used in the example you linked to is underscore.js). These will use their own syntax for you to write within those script tags.
It's legit and very handy!
Try this:
<script id="hello" type="text/template">
Hello world
</script>
<script>
alert($('#hello').html());
</script>
Several Javascript templating libraries use this technique. Handlebars.js is a good example.
By setting script tag type other than text/javascript, browser will not execute the internal code of script tag. This is called micro template. This concept is widely used in Single page application(aka SPA).
<script type="text/template">I am a Micro template.
I am going to make your web page faster.</script>
For micro template, type of the script tag is text/template. It is very well explained by Jquery creator John Resig http://ejohn.org/blog/javascript-micro-templating/
To add to Box9's answer:
Backbone.js is dependent on underscore.js, which itself implements John Resig's original microtemplates.
If you decide to use Backbone.js with Rails, be sure to check out the Jammit gem. It provides a very clean way to manage asset packaging for templates.
http://documentcloud.github.com/jammit/#jst
By default Jammit also uses JResig's microtemplates, but it also allows you to replace the templating engine.
It's a way of adding text to HTML without it being rendered or normalized.
It's no different than adding it like:
<textarea style="display:none"><span>{{name}}</span></textarea>
<script type = “text/template”> … </script> is obsolete. Use <template> tag instead.
jQuery Templates is an example of something that uses this method to store HTML that will not be rendered directly (that’s the whole point) inside other HTML:
http://api.jquery.com/jQuery.template/
I'm using a modular system of JavaScript files when working in Rails - basically each view will have its own module in a .js file. My issue comes when I need a dynamic, Rails generated string within my JavaScript, for example translation strings and URLs.
Translations are nicely solved using babilu but I'm still stuck on the generation of URLs. I could write something that looked at the routes in the application and generate JavaScript methods which I could pass stuff like IDs of objects.
An alternative would be to pass in the already-generated URL to any functions I was calling, which sounds messy but could be the most flexible alternative.
I don't know that there's any truly pleasing way to do this, but one possibility is to have your server-side code write a small <script> block into the page to declare some variables that your packaged Javascript can discover and use.
<script>
var pageGlobals = {
interestingURL: <% ... url %>,
...
};
</script>
I've done this to keep track of things like image subdirectories that are determined by customer "syndicate" affiliation. The Javascript code just knows that whenever it needs that for a URL, it can just go look in a global object and pick out a standardized variable.
In my experience there tend to be only a small number of such things to communicate to the canned Javascript, so the <script> block tends not to get out of hand. I've buried mine in a page template so I don't even have to think about it with new pages.
Oldish question, but here's another way. The HTML 5 spec allows for custom data- attributes.
In your view:
<button id="myButton" data-url="<%= my_resource_path %>">Click me</button>
Then in your packaged js:
var myurl = $("#myButton").data("url");
See here also.
I don't like this either. The ideal solution to me would be javascript templates. Imagine in the .js file you could do:
var users_path = '<%= users_path %>';
But that would mean the .js files would have to be regenerated in every request (well, one could use caching just like with rails html).
Anyway, what you can also do is put the dynamic stuff in data- attributes. So you can do for example
<%= select_tag :select_something, select_options, 'data-url' => users_url %>
And then read that attribute out in the javascript file. I prefer this over the solution suggested by Pointy.
Edit: Well actually someone implemented the dynamic .js file idea. Seems straight forward enough, just create a javascripts controller and link to its actions via javascript_include_tag: dynamic javascript files