Download - Java script templating in wordpress
![Page 1: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/1.jpg)
JavaScript Templating in WordPress
Rakesh Lawajuracase.com.np
Digamber Pradhandigamberpradhan.com.np
![Page 2: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/2.jpg)
Speakers
Rakesh LawajuCo-founder/ CTOWEN Solutions
iamracaseracase
Digamber PradhanTeam Lead, Sr. WordPress Developer
Web Experts Nepaldigamberpradhandigamberpradhan
racase.com.np
digamberpradhan.com.np
![Page 3: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/3.jpg)
“JavaScript templating refers to the client side data binding method implemented with the JavaScript language.
-Wikipedia
WHAT IS JAVASCRIPT TEMPLATING?
![Page 4: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/4.jpg)
WHY TO USE JAVASCRIPT TEMPLATING?Just think about it.
Wouldn’t it be better and fast if just raw data like in JSON format is sent from server and display it in HTML on the client side?
Andthat pain in appending data in HTML!!
How about reducing this pain?
![Page 5: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/5.jpg)
PROS:➤ Data generation is separate from presentation code, so good code
organization➤ Web server load is reduced➤ Output generation is more expressive (template syntax doesn't require a
sea of string concatenation)➤ Working with Web Designers
CONS:➤ Users with JavaScript disabled, will very likely not be able to use it.➤ Search Engines will not be able to index your page.➤ Not widely used and well documented for WordPress
![Page 6: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/6.jpg)
HOW TO IMPLEMENT JAVASCRIPT TEMPLATING IN WORDPRESS?
wp.template() is used to load template.Template system is based on Underscore.js.WordPress also has done some modification to use Mustache " {{ }} " instead of default <% %>.“wp-util” should be enqueued to use templating.{{ var }} is used for HTML-escaped data.{{{ var }}} is used for raw data (not escaped).<# some_code() #> allows you to evaluate any JavaScript code.“data” is the name of the object that holds all the data passed to the template“tmpl-“ has to be prefixed on each template id
![Page 7: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/7.jpg)
JS Template
![Page 8: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/8.jpg)
https://github.com/codearryaas/wp-js-templating-trial
Demo Code
https://github.com/digamber89/wp-js-templating
** These are just sample code. Do not use for production.**
![Page 9: Java script templating in wordpress](https://reader033.vdocuments.us/reader033/viewer/2022051520/58ee626e1a28ab9f0b8b4589/html5/thumbnails/9.jpg)
Thank you!