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