-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhandlebars.html
60 lines (54 loc) · 1.76 KB
/
handlebars.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Javascript Templating: HandleBars Demo: Step-by-step approach</title>
<link rel="stylesheet" href="https://developers.google.com/web/css/styles.min.css" >
</head>
<body>
<h1>Step by step HandleBars Demo</h1>
<ul id="a1"><!-- Step 1: Define the template-->
<script id="detail" type="text/x-handlebars-template">
{{#each this}}
<li>Name : {{fullName name}}</li>
{{#if age}}<li>Age: {{{age}}}</li>{{/if}}
<li>Country is: {{country}}</li>
<!-- Condition based display -->
{{#if quote}} <p><b>Quote:</b>{{quote}}</p> {{else}}<p>This person is not literate enough to 'Quote' something!!</p> {{/if}}
<hr/>
{{/each}}
</script>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script>
$(function(){
//Step 2: Define the data
var data = [
{
name: {first:"Siraj", last:"Khan"},
country:"India",
age: 27,
quote: "The rung of a ladder was never meant to rest upon, but only hold a man's foot long enough to enable him to put the other somewhat higher!!!"
},
{
name: {first:"Little", last:"kid"},
country:"China",
age: 5
},
];
Handlebars.registerHelper('fullName',function(author){
return author.first +' '+ author.last;
});
//Step 3: Compile the <script> template with HandleBars -- returns func
tpl = Handlebars.compile($("#detail").html());
//Step 4: Pass the data into the func -- returns the final HTML
finalHTML = tpl (data);
//Step 5: add the final HTML to desired tag
$("#a1").append(finalHTML);
//$( ".container" ).append( $( "h2" ) );
});
</script>
</body>
</html>