Websites: https://www.designveloper.com Visit our blog: https://www.designveloper.com/blog Like Facebook page: https://www.facebook.com/designveloper/ Youtube: http://bit.ly/29PTtFS

1. Javascript template
engine
Author:Nguyen Thanh Phuc
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity
DESIGNVELOPER

2. Agenda
• Introduce Javascript Template
• JSON (Javascript Object Notation)
• Javascript Object and JSON
• Working with javascript object
• Parse JSON
• Javascript Template Engine
• Embedded JavaScript Templates
• Logic-less Templates
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

3. Introduce Javascript Template
var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++) {
html += "<li><a href='supplies/"+data.supplies[i]+"'>"
html += data.supplies[i]+"</a></li>"
}
html += "</ul>"
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

4. JSON
• JSON: JavaScript Object Notation.
• JSON is syntax for storing and exchanging text information.
Much like XML.
• JSON is smaller than XML, and faster and easier to parse.
• http://www.json.org/
• http://www.w3schools.com/json/
http://caniuse.com/json
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

5. JSON and Javascript Object
Javascript Object
Var ob={firstname:”david”}
Var ob={'firstname':”david”}
Var ob={'firstname':”david”
, full_name =function(){
alert(this.firstname);}
}
Any javascript structure
JSON.stringify()
JSON
{“first_name”:”david”}
Value one of six data types
Strings, number, object,
array,boolean, or null
JSON.parse()
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

6. JSON TOOLS
http://jsonlint.com/
http://jsoneditoronline.com
Debug with browser
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

7. Working with javascript object
• Debug javascript object with your browser
• Modify array object in javascript
• Loop through object in javascript
• Access object in array
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

8. Parse JSON
• Using Ajax
• Using Jquery
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

9. Javascript Template Engine
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

10. Embedded JavaScript Templates
• underscore.js
• Jade
• haml-js
• jQote2
• doT
• Stencil
• Parrot
• Eco
• EJS
• jQuery templates
• node-asyncEJS
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity

11. Logic-less Templates
• mustache
• dust.js
• handlebars
• Google Closure Templates
• Nun
• Mu
• Kite
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity