I originally was using Mustache.js but found that it does not work well for rendering large nested trees (it has no way of disambiguating variables of the same name in nested structures).
I was happy to find a PHP version of Underscore.js, but when I looked at the code of Underscore.php I realized that its template method does not render Underscore.js-style templates. Instead it replicates similar functionality but with PHP variables.
Jquery-tmpl/jquery-tmpl-php is another template language with JS and PHP libraries, but my concerns are that the jquery-tmpl-php library seems not to be used much (very few people are following it on github) and that jQuery decided to remove jQuery-tmpl as an official plugin: http://blog.jquery.com/2011/04/16/official-plugins-a-change-in-the-roadmap/
Also it seems that the author of jquery-tmpl has not touched it in months.
What are other people doing to render Javascript and PHP using the same templates?
Jade does it:
https://github.com/everzet/jade.php
https://github.com/visionmedia/jade
You should try mustache. It's has implementations in many different languages.
Have to get used to a different way to do control structures but its not too difficult to figure out.
http://mustache.github.io/
Related
I am looking for a reasonable way to structure my Javascript code for regular websites that get more and more dependent on Javascript.
Large Javascript applications use - put your framework here, Angular, React, Backbone. Small websites suffice with just a list of $().slider(), $().popup() in a script style.
What I currently do is using the module pattern for different parts - slider, popup - and initialize these in my jQuery(document).ready(function($) { ... }); function. For example:
jQuery(document).ready(function($) {
HomeSlider.init();
ImageGallery.init();
});
Libraries are loaded via Bower and automatically prepended by Gulp. Any other suggestions for that are welcome as well.
Once more libraries are added, more REST/AJAX-calls are made and pushState is used more often my Javascript starts to become a mess and keep track of what happens when/where.
I am looking for suggestions to structure this Javascript for 'regular and modern' websites without committing to a big framework and 'overengineering' my code. This might be in form of code examples, 'light' frameworks or any literature.
Thanks a lot for reading and maybe even answering my question!
The answer to my own question would now be: Use VueJS.
I'm watching a course (2014) about jQuery Template.
One sentence troubled me:
from text
The nice thing about jQuery Template is that it's a plug in for
jQuery. And it leverages existing jQuery syntax. And many websites
already use jQuery. So chances are, you're already familiar with how
to load and use this particular plugin. It's used for simple
templating. There are no conditionals or logic in jQuery Template.
But jQuery Template has {{if}}, {{else}}. So jQuery Template has conditionals. Am I right?)
Or don't I misunderstand author? Or is it serious author mistake?
I try to find documentation
jquery-template - is it old version? I didn't find if statements
jquery-tmpl - Is it new version? readme.md describes
{each}}, {{if}}, {{else}}, {{html}}, {{tmpl}} and {{wrap}}
For context on jQuery Templates, see the info on the jquery-templates tag: https://stackoverflow.com/tags/jquery-templates/info.
You will see that the original official jQuery templates is this one jquery-tmpl. It does support conditionals. The ongoing next-generation version of jQuery templates is jsrender - which actually has better separation of code, markup and logic, (and better separation from the DOM) - and provides more powerful logic support than jQuery Templates did.
The other link you give, to jquery-template is a completely different templating approach, that recently chose to use 'jquery-templates' for its github project name, although it is in fact quite unrelated to the official (and much used) jQuery Templates.
I'm wondering if I can use CoffeeScript to include other standard JS files (as a simple way to do some combining of files).
I have a client-side minification tool I'm using (an app called Live Reload) which is working just fine.
<!-- Some jQuery plugins I'm using. -->
<script src="/js/libs/some-plugin.js"></script>
<script src="/js/libs/another-plugin.js"></script>
<!-- The output of my /js/script.coffee file: -->
<script src="/js/script.js"></script>
What I'd like to do, is just combine those plugins into output of my coffeescript file. I've looked high and low and I've only seen articles on server methods for this as well as a lot of articles on things like requirejs.org. I'm not trying to do anything that complex- I just want to get rid of a couple round trips for js files I know I'm never going to touch.
Does CoffeeScript have an "include" function to speak of?
There are ways you can achieve this by creating a more complex Cakefile, in which you will read the contents of js-files and append them with CS compiler output than write it into the single target js file. You can even create a fake global require function which will mimic its behaviour in the bundled file.
If you were looking for a standard tool or at least an approach to that problem, unfortunately, since CS is very young, there's none yet. There are some attempts though: https://github.com/jashkenas/coffeescript/wiki/%5BIntegrations%5D-Build-Tools.
I'm currently working on such a tool myself and am planning to publish it within a month. I'll post back then.
Basically, the answer seems to be no. This is not something CoffeeScript is capable of.
I'd really like to use a Javascript templating system together with Django. The syntax and style of Mustache.js (and it's derivatives) really sits well with me. The problem is the delimiter tag used by Mustache doesn't play nicely with the syntax of Django's templating system.
Is there any good way to use them together?
I have tried using this verbatim snippet to render the JS templates properly. The problem with that solution is I still sometimes need Django variables or URLs inside the JS.
I have also tried changing the delimiter for Mustache using
{{=[[ ]]=}}
However, that doesn't allow for using section tags, like {{#}}. The author has said he intends on removing that capability in future releases altogether.
Are there any template libraries for Javascript that follow closely to Mustache.js, but use different delimiters? Or is there another solution for changing the delimiters Mustache.js uses?
I've used jquery's templating with django. Ultimately I decided the best way is:
put all the javascript into static javascript files and serve them up without any serverside processing
in the django templates deliver all the html hooks (id's or classes) but no js.
in the js use 'document.ready' plus jquery selectors to insert tags into the page and attach events
if the js needs data then make an ajax call.
I softened on the last one and might embed data as a block of json into the django template, and perhaps also have a short js at the bottom of a template which do no more than set variables/parameters to instruct the js how to render the page - little clues from the server side telling it what to do.
Thus:
contention between the escape characters becomes a non-issue
you don't have to keep asking yourself "is this code running on the server or on the client" because you're not trying to write both at once into the one file
your javascript code is necessarily better structured and re-usable
It looks like it would be extremely easy to change Mustache's delimiters, although configurable delimiters should be supported in my opinion.
If this is not acceptable to you, there are many other templating libraries out there such as jquery-tmpl and underscore.template.
EJS is a pretty nice templating system. It uses <% %> tags.
Edit: More templating libs
I'm using Django and I need to support multilanguage in my Javascript code. But my Javascript files are into site_media so they are not rendering by the template engine. I would like to learn what is the most common solution for this situation, how do you handle it generally?
Thanks
You may want to look into the l10n.js library I've written. The benefits are that you can separate language data files and code in a way that only optionally requires l10n.js.