So I have this code for example:
<script id='nice' type='text/template'>
<p>variable here</p>
</script>
So this is a learning question. I want to ask how to call this script in JAVASCRIPT NOT JQUERY with a variable which should be in the place of variable here.
Sorry if my question is so silly...
If you want basic templating in javascript I suggest you use a library such as underscore or Mustache.
In underscore you can do the following:
var template='<div><%=name%></div>'
_.template(template)({name:'foo'})
Which you can then insert into the DOM using your technique of choice.
Related
I'm trying to build a Handlebars app using only JavaScript. I've noticed in there documentation, they initialize using:
var source = $("#entry-template").html();
Is this step required or is there a way around it using only native Javascript?
No, it doesn't require jQuery.
Only reason why people prefer jQuery is because of ease of use with which jQuery perform various operations. It saves lots of time & additional effort.
Using handlebars with plain javscript will require some extra effort. If you have enough time then you should try out things with plain JavaScript.
Below given links might be of some help to understand things better -
http://code.tutsplus.com/tutorials/handlebarsjs-a-behind-the-scenes-look--net-32678
http://www.raymondcamden.com/2012/04/19/Demo-of-Handlebars-and-why-you-should-consider-a-templating-engine
No. If you read the example further you would see they are only using jQuery to get the HTML content of an element. This is something that could have been done in vanilla JS. Any code that follows is not jQuery. The following is the same example sans jQuery. As you can see the way Handlebars is written is unaffected.
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
<script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: en_US
</script>
<script type="IN/Share" data-counter="right"></script>
Here is the code I got from http://developer.linkedin.com/plugins/share-plugin-generator
What is the lang: en_US for? I've never seen this kind of usage of JavaScript (or quote of .js link) before.
lang: fr_FR is use for the Specify language for label of your share button.
From the API Reference
The contents inside of the script tag are made available as a template (see "Templating").
Templating
Tags that allow for templating use a special JS syntax for creating HTML within the script tag's contents. This lightweight templating makes it easy to quickly display results.
To me it looks like a JavaScript label statement, which as you pointed out isn't very common, and it is used so you can identify a specific loop and then use a statement referring to that loop (though normally break or continue). There's good write up on MDN here explaining it much more thoroughly. Specifically here it is obviously used to identify the language but without looking closely at the code I'm not sure how it is implemented.
Can somebody please explain the pros and cons for below.
Am having a function to get the url querystring parameters, but I need to know which is the best way to write the function. Eg: if i create the function using jquery plugin style, then every time I need to use a target element to access the function as below
$("#targetDom").getQueryString("name");
However, if I create the function using javascript classes or javascript design pattern, it would be
getQueryString("name");
This is a small example but considering large application which approach is best? is there any disadvantage in going with jquery plugin way?
Regards,
Navin
I found a while ago this sentence:
Don't learn jQuery. Just use it.
It's one of the best advices for a newbie, I think.
jQuery is just an addition to javascript. It simplifies DOM traversing/manipulation, makes easy event handling and so on, but it is not something you should start learning before you know vanilla Javascript.
Regarding your example, it is not the best thought example for jQuery plugin.
The syntax you suggested ($("#targetDom").getQueryString("name");) implies that you treat URL query string as attached somehow to the HTML element, which is wrong...
I have created an external JS file, this JS file contains some methodes that uses JQuery, i can't seem to find a way to refernece the JQuery file on JS file and user it there. Any help would be appreciated
Two things are important to reach your goal:
Include the javascript files. Include both files in your HTML via a script-tag, starting with jQuery to make sure it is loaded when used by your javascript.
Ensure jQuery. This is something way to less people tell you. If you write JS and jQuery for a long time, sooner or later you'll encounter a case where something is overwriting the $-variable. The $-variable is used by jQuery and everyone coding with it because of the obvious fact that it's just one char. However, jQuery doesn't have any "rights" or something for the $-variable, so basically anything or anyone could overwrite it. So I recommend your own javascript file looks like this:
(function($)
{
// your coding starts here.
})(jQuery);
You probably already encountered this when dissecting jQuery plugins from people who know what they're doing. It creates an anonymous function that takes one parameter which will be know by $ inside the function. The function is then immediately called and hands over the jQuery function. This way you can be sure that, whatever happens outside this function, inside of it $ stands for jQuery.
In your HTML file, include the jQuery file first and then your file:
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="myfile.js"></script>
As long as you include the jQuery core in your HTML, the global jQuery object is available in any of your scripts. Is there a specific problem you're having?
You must write a piece of script (plain JS) that checks for the presence of jQuery, if not, it must append a script reference to the page pointing to a jQuery file (or Google CDN) to include jQuery. After that, you can use jQuery in the rest of your script.
I think it will involve some interval that checks wheter the jQuery object is present or not and waits with executing the rest of your code till that it the case.
Google for this, I'm sure there is something out there.
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/