JavaScript templating - Revision history

Spritfizz: Add JSX to list of examples -- today this is one of the most popular JS Templating languages

2024-10-29T19:40:19Z

Add JSX to list of examples -- today this is one of the most popular JS Templating languages

← Previous revision		Revision as of 19:40, 29 October 2024
Line 2:		Line 2:
	{{no footnotes\|date=July 2013}}		{{no footnotes\|date=July 2013}}

	'''JavaScript templating''' refers to the [[client side]] [[data binding]] method implemented with the [[JavaScript\|JavaScript language]]. This approach became popular thanks to JavaScript's increased use, its increase in client processing capabilities, and the trend to outsource computations to the client's web browser. Popular JavaScript templating libraries are [[AngularJS]], [[Backbone.js]], [[Ember.js]], [[Handlebars.js]], [[Vue.js]] and [[Mustache.js]]. A frequent practice is to use double [[curly bracket]]s (i.e. <nowiki>{{key}}</nowiki>) to call values of the given key from data files, often [[JSON]] objects.		'''JavaScript templating''' refers to the [[client side]] [[data binding]] method implemented with the [[JavaScript\|JavaScript language]]. This approach became popular thanks to JavaScript's increased use, its increase in client processing capabilities, and the trend to outsource computations to the client's web browser. Popular JavaScript templating libraries are [[AngularJS]], [[Backbone.js]], [[Ember.js]], [[Handlebars.js]], [[JSX_(JavaScript)\|JSX]] (used by [[React_(JavaScript_library)\|React]]), [[Vue.js]] and [[Mustache.js]]. A frequent practice is to use double [[curly bracket]]s (i.e. <nowiki>{{key}}</nowiki>) to call values of the given key from data files, often [[JSON]] objects.

	== Examples ==		== Examples ==

Liance: irrelevant redirect

2024-04-11T21:50:49Z

irrelevant redirect

← Previous revision		Revision as of 21:50, 11 April 2024
Line 84:		Line 84:

	== See also ==		== See also ==
	* [[Online JavaScript IDE]]
	* [[Comparison of web template engines]]		* [[Comparison of web template engines]]

Cedar101: /* Examples */ fix syntaxhighlight errors

2023-07-06T04:41:01Z

Examples: fix syntaxhighlight errors

← Previous revision		Revision as of 04:41, 6 July 2023
Line 27:		Line 27:
	[https://github.com/webdevelopers-eu/jquery-dna-template DNA Template]		[https://github.com/webdevelopers-eu/jquery-dna-template DNA Template]
	\| width="65%"\|		\| width="65%"\|
	<syntaxhighlight lang="~~html5~~">		<syntaxhighlight lang="html" line>
	<link rel="stylesheet" type="text/css" href=".../template.css"/>		<link rel="stylesheet" type="text/css" href=".../template.css"/>
	<script src=".../jquery.min.js"></script>		<script src=".../jquery.min.js"></script>
Line 53:		Line 53:
	[[Mustache.js]]		[[Mustache.js]]
	\| width="65%"\|		\| width="65%"\|
	<syntaxhighlight lang="~~html5~~">		<syntaxhighlight lang="html" line>
	<script src=".../jquery.min.js"></script>		<script src=".../jquery.min.js"></script>
	<script src=".../mustache.min.js"></script> ➊		<script src=".../mustache.min.js"></script> ➊

Jonesey95: add cat from template

2023-06-13T04:18:34Z

add cat from template

← Previous revision		Revision as of 04:18, 13 June 2023
Line 98:		Line 98:

	[[Category:Template engines]]		[[Category:Template engines]]
			[[Category:JavaScript libraries]]

Hunan201p at 22:26, 4 November 2022

2022-11-04T22:26:56Z

← Previous revision		Revision as of 22:26, 4 November 2022
Line 76:		Line 76:
	\| valign="top"\|		\| valign="top"\|
	➊ Load the necessary libraries, here [[mustache.js]] and [[jQuery]]<br />		➊ Load the necessary libraries, here [[mustache.js]] and [[jQuery]]<br />
	➋ The HTML code provides an "target" to insert generated contents into.<br />		➋ The HTML code provides a "target" to insert generated contents into.<br />
	➌ Provide a template named "president-template". <br />		➌ Provide a template named "president-template". <br />
	➍ Last is a function grasping the JSON data, and for each president's subitem, grasping one template and filling it to finally select the HTML page's target appending the whole to it.		➍ Last is a function grasping the JSON data, and for each president's subitem, grasping one template and filling it to finally select the HTML page's target appending the whole to it.

Qwerfjkl: Changing short description from "client side data binding method implemented with JavaScript" to "Client side data binding method implemented with JavaScript" (Shortdesc helper)

2021-08-06T09:54:39Z

Changing short description from "client side data binding method implemented with JavaScript" to "Client side data binding method implemented with JavaScript" (Shortdesc helper)

← Previous revision		Revision as of 09:54, 6 August 2021
Line 1:		Line 1:
	{{Short description\|~~client~~ side data binding method implemented with JavaScript}}		{{Short description\|Client side data binding method implemented with JavaScript}}
	{{no footnotes\|date=July 2013}}		{{no footnotes\|date=July 2013}}

Qwerfjkl: Changing short description from "Client show data binding method implemented with JavaScript" to "client side data binding method implemented with JavaScript" (Shortdesc helper)

2021-08-06T09:54:12Z

Changing short description from "Client show data binding method implemented with JavaScript" to "client side data binding method implemented with JavaScript" (Shortdesc helper)

← Previous revision		Revision as of 09:54, 6 August 2021
Line 1:		Line 1:
	{{Short description\|~~Client~~ ~~show~~ data binding method implemented with JavaScript}}		{{Short description\|client side data binding method implemented with JavaScript}}
	{{no footnotes\|date=July 2013}}		{{no footnotes\|date=July 2013}}

Qwerfjkl: Adding short description: "Client show data binding method implemented with JavaScript" (Shortdesc helper)

2021-08-06T09:53:37Z

Adding short description: "Client show data binding method implemented with JavaScript" (Shortdesc helper)

← Previous revision		Revision as of 09:53, 6 August 2021
Line 1:		Line 1:
			{{Short description\|Client show data binding method implemented with JavaScript}}
	{{no footnotes\|date=July 2013}}		{{no footnotes\|date=July 2013}}

DannyS712 bot: Task 70: Update syntaxhighlight tags - remove use of deprecated tags

2020-05-11T18:01:16Z

Task 70: Update syntaxhighlight tags - remove use of deprecated <source> tags

← Previous revision		Revision as of 18:01, 11 May 2020
Line 26:		Line 26:
	[https://github.com/webdevelopers-eu/jquery-dna-template DNA Template]		[https://github.com/webdevelopers-eu/jquery-dna-template DNA Template]
	\| width="65%"\|		\| width="65%"\|
	<~~source~~ lang="html5">		<syntaxhighlight lang="html5">
	<link rel="stylesheet" type="text/css" href=".../template.css"/>		<link rel="stylesheet" type="text/css" href=".../template.css"/>
	<script src=".../jquery.min.js"></script>		<script src=".../jquery.min.js"></script>
Line 43:		Line 43:
	});		});
	</script> ➌		</script> ➌
			</syntaxhighlight>
	</source>
	\| valign="top"\|		\| valign="top"\|
	➊ Load the necessary resources, including required [[jQuery]]<br />		➊ Load the necessary resources, including required [[jQuery]]<br />
Line 52:		Line 52:
	[[Mustache.js]]		[[Mustache.js]]
	\| width="65%"\|		\| width="65%"\|
	<~~source~~ lang="html5">		<syntaxhighlight lang="html5">
	<script src=".../jquery.min.js"></script>		<script src=".../jquery.min.js"></script>
	<script src=".../mustache.min.js"></script> ➊		<script src=".../mustache.min.js"></script> ➊
Line 72:		Line 72:
	});		});
	</script> ➍		</script> ➍
			</syntaxhighlight>
	</source>
	\| valign="top"\|		\| valign="top"\|
	➊ Load the necessary libraries, here [[mustache.js]] and [[jQuery]]<br />		➊ Load the necessary libraries, here [[mustache.js]] and [[jQuery]]<br />

Monkbot: /* References */Task 16: replaced (1×) / removed (0×) deprecated |dead-url= and |deadurl= with |url-status=;

2019-10-02T22:21:28Z

References: Task 16: replaced (1×) / removed (0×) deprecated |dead-url= and |deadurl= with |url-status=;

← Previous revision		Revision as of 22:21, 2 October 2019
Line 89:		Line 89:
	* {{citation\|url=https://developer.mozilla.org/en-US/docs/JavaScript_templates\|title=JavaScript templates\|publisher=Mozilla Developer Network\|year=2013}}		* {{citation\|url=https://developer.mozilla.org/en-US/docs/JavaScript_templates\|title=JavaScript templates\|publisher=Mozilla Developer Network\|year=2013}}
	* {{citation\|url=http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more\|title=The client-side templating throwdown: mustache, handlebars, dust.js, and more\|last=Basavaraj\|first=veena\|publisher=Linkedin.com\|year=2012}}		* {{citation\|url=http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more\|title=The client-side templating throwdown: mustache, handlebars, dust.js, and more\|last=Basavaraj\|first=veena\|publisher=Linkedin.com\|year=2012}}
	* {{citation\|url=http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|title=Introduction to JavaScript Templating (video tutorial) with Mustache.js \|last=Villalobos \|first=Ray \|year=2012 \|publisher=ViewSource.com \|~~deadurl~~=~~yes~~ \|archiveurl=https://web.archive.org/web/20130513103343/http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|archivedate=2013-05-13 ~~\|df=~~ }}		* {{citation\|url=http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|title=Introduction to JavaScript Templating (video tutorial) with Mustache.js \|last=Villalobos \|first=Ray \|year=2012 \|publisher=ViewSource.com \|url-status=dead \|archiveurl=https://web.archive.org/web/20130513103343/http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|archivedate=2013-05-13 }}
	* {{citation\|url=http://net.tutsplus.com/tutorials/javascript-ajax/best-practices-when-working-with-javascript-templates/ \|title=Best Practices When Working With JavaScript Templates \|last=Burgess \|first=Andrew \|year=2012\|publisher=Net.tutsplus.com}}		* {{citation\|url=http://net.tutsplus.com/tutorials/javascript-ajax/best-practices-when-working-with-javascript-templates/ \|title=Best Practices When Working With JavaScript Templates \|last=Burgess \|first=Andrew \|year=2012\|publisher=Net.tutsplus.com}}
	* {{citation\|url=http://viget.com/extend/benchmarking-javascript-templating-libraries\|title=Benchmarking Javascript Templating Libraries\|year=2009\|last=Landau\|first=Brian}}		* {{citation\|url=http://viget.com/extend/benchmarking-javascript-templating-libraries\|title=Benchmarking Javascript Templating Libraries\|year=2009\|last=Landau\|first=Brian}}

← Previous revision		Revision as of 22:21, 2 October 2019
Line 89:		Line 89:
	* {{citation\|url=https://developer.mozilla.org/en-US/docs/JavaScript_templates\|title=JavaScript templates\|publisher=Mozilla Developer Network\|year=2013}}		* {{citation\|url=https://developer.mozilla.org/en-US/docs/JavaScript_templates\|title=JavaScript templates\|publisher=Mozilla Developer Network\|year=2013}}
	* {{citation\|url=http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more\|title=The client-side templating throwdown: mustache, handlebars, dust.js, and more\|last=Basavaraj\|first=veena\|publisher=Linkedin.com\|year=2012}}		* {{citation\|url=http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more\|title=The client-side templating throwdown: mustache, handlebars, dust.js, and more\|last=Basavaraj\|first=veena\|publisher=Linkedin.com\|year=2012}}
	* {{citation\|url=http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|title=Introduction to JavaScript Templating (video tutorial) with Mustache.js \|last=Villalobos \|first=Ray \|year=2012 \|publisher=ViewSource.com \|~~deadurl~~=~~yes~~ \|archiveurl=https://web.archive.org/web/20130513103343/http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|archivedate=2013-05-13 ~~\|df=~~ }}		* {{citation\|url=http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|title=Introduction to JavaScript Templating (video tutorial) with Mustache.js \|last=Villalobos \|first=Ray \|year=2012 \|publisher=ViewSource.com \|url-status=dead \|archiveurl=https://web.archive.org/web/20130513103343/http://iviewsource.com/codingtutorials/introduction-to-javascript-templating-with-mustache-js/ \|archivedate=2013-05-13 }}
	* {{citation\|url=http://net.tutsplus.com/tutorials/javascript-ajax/best-practices-when-working-with-javascript-templates/ \|title=Best Practices When Working With JavaScript Templates \|last=Burgess \|first=Andrew \|year=2012\|publisher=Net.tutsplus.com}}		* {{citation\|url=http://net.tutsplus.com/tutorials/javascript-ajax/best-practices-when-working-with-javascript-templates/ \|title=Best Practices When Working With JavaScript Templates \|last=Burgess \|first=Andrew \|year=2012\|publisher=Net.tutsplus.com}}
	* {{citation\|url=http://viget.com/extend/benchmarking-javascript-templating-libraries\|title=Benchmarking Javascript Templating Libraries\|year=2009\|last=Landau\|first=Brian}}		* {{citation\|url=http://viget.com/extend/benchmarking-javascript-templating-libraries\|title=Benchmarking Javascript Templating Libraries\|year=2009\|last=Landau\|first=Brian}}