Post on 19-Jan-2015
description
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
Javascript template engineAuthor:Nguyen Thanh Phuc
DESIGNVELOPER
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
Web
site
: htt
p://
desi
gnve
lope
r.com
Ad
dres
s: 2
50/6
Bau
Cat
, War
d 11
, Ta
n Bi
nh D
istric
t, H
CM C
ity
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
Introduce Javascript Templatevar 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>"
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
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
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
JSON and Javascript ObjectJavascript 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()
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
JSON TOOLS
http://jsonlint.com/http://jsoneditoronline.com
Debug with browser
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
Working with javascript object• Debug javascript object with your browser• Modify array object in javascript• Loop through object in javascript• Access object in array
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
Parse JSON• Using Ajax• Using Jquery
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
Javascript Template Engine
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
Embedded JavaScript Templates
• underscore.js• Jade• haml-js• jQote2• doT• Stencil• Parrot• Eco• EJS• jQuery templates• node-asyncEJS
Web
site
: htt
p://
desi
gnve
lope
r.com
Add
ress
: 250
/6 B
au C
at, W
ard
11,
Tan
Binh
Dist
rict,
HCM
City
Logic-less Templates
• mustache• dust.js• handlebars• Google Closure Templates• Nun• Mu• Kite