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.
Related
I have a client who had a very complex jQuery app custom built by a previous developer within his WordPress site. Its functionality is cleanly broken out into several scripts which get minified together with the libraries they depend on. The libraries rely on an old version of jQuery (3.3.1). The site is complex and we need to be able to use the current version of jQuery to allow other plugins we're using to continue to keep up with upgrades.
The libraries include c. 2018 versions of:
Select2
Isotope
SpriteSpin
EasyResponsiveTabs
ImagesUploaded
jQuery Viewport
Some of these are minified/uglified.
I've used best practices to load jQuery 3.3.1 into a variable jQuery3_3_1 with noconflict();
It's rather easy to change standard jQuery to use jQuery3_3_1. But I need a way to force the libraries to use jQuery3_3_1, otherwise they are not recognized by the scripts (and some of them will have issues using a different version of jQuery than they were built in). Most of these use requireJs(), and I've seen instructions for setting up requirejs.config() code in the footer that will define "jquery" to be a particular version. Doing this would be a great solution, but I have no idea how to get these uglified scripts to use it.
I've read through several similar inquiries, but none have addressed forcing a jQuery version on minified/uglified code. Others speak to a level of expertise in jQuery module development that I don't have and don't have time to scale into.
Is there a way to get all these modules that use require('jquery') to have that reference jQuery3_3_1? I'd love it if there were a way to say, "For all the files that live in this directory, jQuery/jquery (there are 2 ways it is called) means jQuery3_3_1/jquery3.3.1".
Or being that it's a Wordpress site, could this be defined in the wp_enqueue_script() call?
Many thanks for your help!
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.
Background
I am new to Node.JS but very experienced with JavaScript and jQuery. I have had no problem installing jQuery via npm install jquery, however, referencing plugins within the code is another challenge.
I have reviewed this similar StackOverflow question, and the solution appears to work but it seems to me that instantiating a "fake" browser window and injecting your jQuery plugin-based functions each time you need the plugin is possibly not the most efficient approach.
The specific plugin that is failing for me linq.js (yes, I am aware that js linq is available via npm but it is not the same as linq.js!).
NOTE: The plugin to which I am referring does not rely on any DOM elements; in my case, it simply runs JSON objects through various data functions. This is why I don't think I need to instantiate a window object.
Question
How do I properly import and use jQuery plugins in a Node.JS application?
You can't do this. JQuery manipulates DOM on the client-side, which means that it has no business on the server-side where NodeJs runs.
You don't.
You don't use jQuery on the server, ever. It has no place there, you don't have a DOM on the server and jQuery itself is a mediocre library to start with.
If you really want to use a "jQuery plugin" in node, you rewrite the plugin as a standalone module without a jQuery dependency.
As an aside, you also shouldn't need linq.js because it's an API you don't need, you already have array methods. Also your coding C# in JavaScript rather then learning JavaScript.
You also have all the array methods (map, filter, reduce, etc) so you simply do not need this. If you really want some of the sugar linq.js offers use underscore instead. (I personally recommend for ES5 over underscore)
Please use ECMAScript correctly rather then emulating C#.
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/
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