|
@@ -1,110 +1,85 @@
|
|
|
-<!-- This is an example of using the same template with
|
|
|
|
|
- different data -->
|
|
|
|
|
|
|
+<!-- This is an example of using the same template with different data -->
|
|
|
|
|
|
|
|
<head>
|
|
<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/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">
|
|
|
|
|
|
|
+ <script src="js/bootstrap.min.js"></script>
|
|
|
|
|
|
|
|
|
|
+ <link href="css/bootstrap.css" rel="stylesheet">
|
|
|
|
|
+ <link href="css/gallery.css" rel="stylesheet">
|
|
|
</head>
|
|
</head>
|
|
|
|
|
|
|
|
<body role="document">
|
|
<body role="document">
|
|
|
-
|
|
|
|
|
<div class="container">
|
|
<div class="container">
|
|
|
-
|
|
|
|
|
<div class="page-header">
|
|
<div class="page-header">
|
|
|
<h1>My photo albums </h1>
|
|
<h1>My photo albums </h1>
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- this is a simple nav bar for selecting between images -->
|
|
<!-- this is a simple nav bar for selecting between images -->
|
|
|
<ul class="nav nav-tabs">
|
|
<ul class="nav nav-tabs">
|
|
|
- <li role="" id="image1btn">
|
|
|
|
|
- <a href="#">Image 1</a>
|
|
|
|
|
- </li>
|
|
|
|
|
- <li role="" id="image2btn">
|
|
|
|
|
- <a href="#">Image 2</a>
|
|
|
|
|
- </li>
|
|
|
|
|
- </ul>
|
|
|
|
|
- <br/><br/>
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <li role="" id="image1btn">
|
|
|
|
|
+ <a href="#">Image 1</a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li role="" id="image2btn">
|
|
|
|
|
+ <a href="#">Image 2</a>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <br /><br />
|
|
|
|
|
|
|
|
<!-- the content of the web page starts off empty
|
|
<!-- the content of the web page starts off empty
|
|
|
because we will fill it later from the template -->
|
|
because we will fill it later from the template -->
|
|
|
- <div id="content" class="container-fluid" role="main">
|
|
|
|
|
|
|
+ <div id="content" class="container-fluid" role="main">
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
- <!-- this is our template
|
|
|
|
|
- it displays an image with a title and author headings
|
|
|
|
|
- the bits in curly brackets {{}} are template expressions.
|
|
|
|
|
- This code uses Bootstrap to provide a grid based layout
|
|
|
|
|
- -->
|
|
|
|
|
- <script id="detail-template" type="text/x-handlebars-template">
|
|
|
|
|
- <br>
|
|
|
|
|
- <div class="row-fluid">
|
|
|
|
|
- <div class="col-sm-5">
|
|
|
|
|
-
|
|
|
|
|
- <img style="width:100%" src="{{src}}"/>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="col-sm-7">
|
|
|
|
|
- <h1>{{title}}</h1>
|
|
|
|
|
- <h3 class="author">
|
|
|
|
|
- {{author}}
|
|
|
|
|
- </h3>
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <!-- this is our template
|
|
|
|
|
+ it displays an image with a title and author headings
|
|
|
|
|
+ the bits in curly brackets {{}} are template expressions.
|
|
|
|
|
+ This code uses Bootstrap to provide a grid based layout
|
|
|
|
|
+ -->
|
|
|
|
|
+ <script id="detail-template" type="text/x-handlebars-template">
|
|
|
|
|
+ <br />
|
|
|
|
|
+ <div class="row-fluid">
|
|
|
|
|
+ <div class="col-sm-5">
|
|
|
|
|
+ <img style="width:100%" src="{{src}}" />
|
|
|
|
|
+ </div>
|
|
|
|
|
|
|
|
- </div>
|
|
|
|
|
|
|
+ <div class="col-sm-7">
|
|
|
|
|
+ <h1>{{title}}</h1>
|
|
|
|
|
+ <h3 class="author">
|
|
|
|
|
+ {{author}}
|
|
|
|
|
+ </h3>
|
|
|
</div>
|
|
</div>
|
|
|
- </script>
|
|
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </script>
|
|
|
|
|
|
|
|
<!-- javascript code to fill the template -->
|
|
<!-- javascript code to fill the template -->
|
|
|
<script type="text/javascript">
|
|
<script type="text/javascript">
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- // have two objects each representing a different image
|
|
|
|
|
- var data1 = {
|
|
|
|
|
- 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"
|
|
|
|
|
- };
|
|
|
|
|
-
|
|
|
|
|
- var data2 = {
|
|
|
|
|
- src: "https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Shopping_Center_Magna_Plaza_Amsterdam_2014.jpg/600px-Shopping_Center_Magna_Plaza_Amsterdam_2014.jpg",
|
|
|
|
|
|
|
+ var data = {
|
|
|
|
|
+ image1btn: {
|
|
|
|
|
+ src: "images/The_Earth_seen_from_Apollo_17.jpg",
|
|
|
|
|
+ title: "The Earth seen from Apollo 17",
|
|
|
|
|
+ author: "Ed g2s"
|
|
|
|
|
+ },
|
|
|
|
|
+ image2btn: {
|
|
|
|
|
+ src: "images/Shopping_Center_Magna_Plaza_Amsterdam_2014.jpg",
|
|
|
title: "Shopping Center Magna Plaza Amsterdam 2014",
|
|
title: "Shopping Center Magna Plaza Amsterdam 2014",
|
|
|
- author: "Tuxyso",
|
|
|
|
|
|
|
+ author: "Tuxyso"
|
|
|
|
|
+ }
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- // get the template and compile it once when
|
|
|
|
|
- // the page loads
|
|
|
|
|
- var source = $("#detail-template").html();
|
|
|
|
|
|
|
+ // Get the template and compile it once when the page loads.
|
|
|
|
|
+ var source = $("#detail-template").html();
|
|
|
var detail_template = Handlebars.compile(source);
|
|
var detail_template = Handlebars.compile(source);
|
|
|
|
|
|
|
|
- // instantiate the tempalte with data whenever you click
|
|
|
|
|
- // there are two separate functions, one for each
|
|
|
|
|
- // image (next week we will see a better way of doing this)
|
|
|
|
|
- $("#image1btn").click(function () {
|
|
|
|
|
- var html = detail_template(data1);
|
|
|
|
|
-
|
|
|
|
|
- $('#content').html(html);
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- $("#image2btn").click(function () {
|
|
|
|
|
- var html = detail_template(data2);
|
|
|
|
|
-
|
|
|
|
|
|
|
+ // Instantiate the template with data whenever you click
|
|
|
|
|
+ // There is only one handler on only one element.
|
|
|
|
|
+ $('ul.nav.nav-tabs').click(function (event) {
|
|
|
|
|
+ var id = $(event.originalEvent.target).parent().attr('id');
|
|
|
|
|
+ var html = detail_template(data[id]);
|
|
|
$('#content').html(html);
|
|
$('#content').html(html);
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
</script>
|
|
</script>
|
|
|
-
|
|
|
|
|
</body>
|
|
</body>
|
