Javascript template
engine
Author:Nguyen Thanh Phuc
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDi...
Agenda
• Introduce Javascript Template
• JSON (Javascript Object Notation)
• Javascript Object and JSON
• Working with jav...
Introduce Javascript Template
var html = "<h1>"+data.title+"</h1>"
html += "<ul>"
for(var i=0; i<data.supplies.length; i++...
JSON
• JSON: JavaScript Object Notation.
• JSON is syntax for storing and exchanging text information.
Much like XML.
• JS...
JSON and Javascript Object
Javascript Object
Var ob={firstname:”david”}
Var ob={'firstname':”david”}
Var ob={'firstname':”...
JSON TOOLS
http://jsonlint.com/
http://jsoneditoronline.com
Debug with browser
Website:http://designveloper.com
Address:25...
Working with javascript object
• Debug javascript object with your browser
• Modify array object in javascript
• Loop thro...
Parse JSON
• Using Ajax
• Using Jquery
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity
Javascript Template Engine
Website:http://designveloper.com
Address:250/6BauCat,Ward11,
TanBinhDistrict,HCMCity
Embedded JavaScript Templates
• underscore.js
• Jade
• haml-js
• jQote2
• doT
• Stencil
• Parrot
• Eco
• EJS
• jQuery temp...
Logic-less Templates
• mustache
• dust.js
• handlebars
• Google Closure Templates
• Nun
• Mu
• Kite
Website:http://designv...
Upcoming SlideShare
Loading in …5
×

Javascript template engine

493 views
359 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
493
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript template engine

  1. 1. Javascript template engine Author:Nguyen Thanh Phuc Website:http://designveloper.com Address:250/6BauCat,Ward11, TanBinhDistrict,HCMCity DESIGNVELOPER
  2. 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. 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. 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. 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. 6. JSON TOOLS http://jsonlint.com/ http://jsoneditoronline.com Debug with browser Website:http://designveloper.com Address:250/6BauCat,Ward11, TanBinhDistrict,HCMCity
  7. 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. 8. Parse JSON • Using Ajax • Using Jquery Website:http://designveloper.com Address:250/6BauCat,Ward11, TanBinhDistrict,HCMCity
  9. 9. Javascript Template Engine Website:http://designveloper.com Address:250/6BauCat,Ward11, TanBinhDistrict,HCMCity
  10. 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. 11. Logic-less Templates • mustache • dust.js • handlebars • Google Closure Templates • Nun • Mu • Kite Website:http://designveloper.com Address:250/6BauCat,Ward11, TanBinhDistrict,HCMCity

×