|
|
@@ -1,58 +1,53 @@
|
|
|
<!-- This is a first example of using a template -->
|
|
|
|
|
|
<head>
|
|
|
+ <!-- include our libraries and css files -->
|
|
|
+ <script src="js/jquery-2.1.4.min.js"></script>
|
|
|
+ <script src="js/handlebars-v3.0.3.js"></script>
|
|
|
|
|
|
-<!-- include our libraries and css files -->
|
|
|
+ <script src="js/bootstrap.min.js"></script>
|
|
|
|
|
|
-<script src="js/jquery-2.1.4.min.js"></script>
|
|
|
-<script src="js/handlebars-v3.0.3.js"></script>
|
|
|
-
|
|
|
-<script src="js/bootstrap.min.js"></script>
|
|
|
-
|
|
|
-<link href="css/bootstrap.css" rel="stylesheet">
|
|
|
-<link href="css/gallery.css" rel="stylesheet">
|
|
|
+ <link href="css/bootstrap.css" rel="stylesheet">
|
|
|
+ <link href="css/gallery.css" rel="stylesheet">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
-
|
|
|
-
|
|
|
- <!-- the content of the web page starts off empty
|
|
|
- because we will fill it later from the template -->
|
|
|
- <div id="content">
|
|
|
+ <!-- the content of the web page starts off empty
|
|
|
+ because we will fill it later from the template -->
|
|
|
+ <div id="content">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- this is our template
|
|
|
+ it displays an image with a title and author headings
|
|
|
+ the bits in curly brackets {{}} are template expressions -->
|
|
|
+ <script id="image-template" type="text/x-handlebars-template">
|
|
|
+ <div class="title">
|
|
|
+ <h1>{{title}}</h1>
|
|
|
+ <h3 class="author">
|
|
|
+ {{author}}
|
|
|
+ </h3>
|
|
|
+ <img style="height:600" src="{{src}}" />
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- this is our template
|
|
|
- it displays an image with a title and author headings
|
|
|
- the bits in curly brackets {{}} are template expressions -->
|
|
|
- <script id="image-template" type="text/x-handlebars-template">
|
|
|
- <div class="title">
|
|
|
- <h1>{{title}}</h1>
|
|
|
- <h3 class="author">
|
|
|
- {{author}}
|
|
|
- </h3>
|
|
|
- <img style="height:600" src="{{src}}"/>
|
|
|
- </div>
|
|
|
- </script>
|
|
|
+ </script>
|
|
|
|
|
|
<!-- javascript code to fill the template -->
|
|
|
<script type="text/javascript">
|
|
|
-
|
|
|
// grab our template code from the DOM
|
|
|
- var source = $("#image-template").html();
|
|
|
+ var source = $("#image-template").html();
|
|
|
|
|
|
// compile the template so we can use it
|
|
|
var template = Handlebars.compile(source);
|
|
|
|
|
|
// create some data
|
|
|
var data = {
|
|
|
- src: "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/600px-The_Earth_seen_from_Apollo_17.jpg ",
|
|
|
- title:"The Earth seen from Apollo 17",
|
|
|
- author:"Ed g2s"
|
|
|
+ src: "images/The_Earth_seen_from_Apollo_17.jpg",
|
|
|
+ title: "The Earth seen from Apollo 17",
|
|
|
+ author: "Ed g2s"
|
|
|
};
|
|
|
|
|
|
// generate HTML from the data
|
|
|
- var html = template(data);
|
|
|
+ var html = template(data);
|
|
|
|
|
|
// add the HTML to the content div
|
|
|
$('#content').html(html);
|
