JavaScript Templating in WordPress

Rakesh Lawajuracase.com.np

Digamber Pradhandigamberpradhan.com.np

Speakers

Rakesh LawajuCo-founder/ CTOWEN Solutions

iamracaseracase

Digamber PradhanTeam Lead, Sr. WordPress Developer

Web Experts Nepaldigamberpradhandigamberpradhan

racase.com.np

digamberpradhan.com.np

“JavaScript templating refers to the client side data binding method implemented with the JavaScript language.

-Wikipedia

WHAT IS JAVASCRIPT TEMPLATING?

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?

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

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

JS Template

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.**

Thank you!