|
@@ -1,4 +1,7 @@
|
|
|
-<!-- This is an example of using the same template with different data -->
|
|
|
|
|
|
|
+<!--
|
|
|
|
|
+ An example of displaying the same data in two different
|
|
|
|
|
+ ways with two templates
|
|
|
|
|
+-->
|
|
|
|
|
|
|
|
<head>
|
|
<head>
|
|
|
<!-- include our libraries and css files -->
|
|
<!-- include our libraries and css files -->
|
|
@@ -17,14 +20,10 @@
|
|
|
<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 display methods -->
|
|
|
<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>
|
|
|
|
|
|
|
+ <li role="" id="detailsbtn"><a href="#">Details</a></li>
|
|
|
|
|
+ <li role="" id="modalbtn"><a href="#">Modal</a></li>
|
|
|
</ul>
|
|
</ul>
|
|
|
<br /><br />
|
|
<br /><br />
|
|
|
|
|
|
|
@@ -34,11 +33,8 @@
|
|
|
</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
|
|
|
|
|
- -->
|
|
|
|
|
|
|
+ <!-- this template displays the image with a title
|
|
|
|
|
+ and author, just like the previous examples -->
|
|
|
<script id="detail-template" type="text/x-handlebars-template">
|
|
<script id="detail-template" type="text/x-handlebars-template">
|
|
|
<br />
|
|
<br />
|
|
|
<div class="row-fluid">
|
|
<div class="row-fluid">
|
|
@@ -55,31 +51,81 @@
|
|
|
</div>
|
|
</div>
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
|
|
+ <!-- This template displays a modal pop-up of the image.
|
|
|
|
|
+ It has quite a bit of boilder plate HTML code but in essence it just
|
|
|
|
|
+ displays an image tag within a set of divs that define the modal
|
|
|
|
|
+ -->
|
|
|
|
|
+ <script id="modal-template" type="text/x-handlebars-template">
|
|
|
|
|
+ <div id="imageModal" class="modal fade" role="dialog">
|
|
|
|
|
+ <div class="modal-dialog" style="width:800">
|
|
|
|
|
+
|
|
|
|
|
+ <div class="modal-content">
|
|
|
|
|
+
|
|
|
|
|
+ <div class="modal-body">
|
|
|
|
|
+ <img style="width:100%" src="{{src}}" />
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </script>
|
|
|
|
|
+
|
|
|
<!-- javascript code to fill the template -->
|
|
<!-- javascript code to fill the template -->
|
|
|
<script type="text/javascript">
|
|
<script type="text/javascript">
|
|
|
|
|
+ // This time we have two templates
|
|
|
|
|
+ // we compile both of them and store the
|
|
|
|
|
+ // results in separate variables
|
|
|
|
|
+ var source = $("#detail-template").html();
|
|
|
|
|
+
|
|
|
|
|
+ var detail_template = Handlebars.compile(source);
|
|
|
|
|
+
|
|
|
|
|
+ source = $("#modal-template").html();
|
|
|
|
|
+
|
|
|
|
|
+ var modal_template = Handlebars.compile(source);
|
|
|
|
|
+
|
|
|
|
|
+ // this is the data object we will be using
|
|
|
var data = {
|
|
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",
|
|
|
|
|
- author: "Tuxyso"
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ src: "images/The_Earth_seen_from_Apollo_17.jpg",
|
|
|
|
|
+ title: "The Earth seen from Apollo 17",
|
|
|
|
|
+ author: "Ed g2s"
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
- // Get the template and compile it once when the page loads.
|
|
|
|
|
- var source = $("#detail-template").html();
|
|
|
|
|
- var detail_template = Handlebars.compile(source);
|
|
|
|
|
|
|
+ var image1Data = {
|
|
|
|
|
+ title: "image1",
|
|
|
|
|
+ author: "Tuxtso",
|
|
|
|
|
+ src: "https://upload.wikimedia.org/wikipedia/commons/archive/9/97/20101017074210%21The_Earth_seen_from_Apollo_17.jpg",
|
|
|
|
|
+ };
|
|
|
|
|
+ //print out the variables
|
|
|
|
|
+ console.log(image1Data.author + " " + image1Data.title + " " + image1Data.src);
|
|
|
|
|
+
|
|
|
|
|
+ // this instantiates the detail template
|
|
|
|
|
+ $("#detailsbtn").click(function () {
|
|
|
|
|
+ // hide the modal if it is showing
|
|
|
|
|
+ $("#imageModal").modal('hide');
|
|
|
|
|
|
|
|
- // 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]);
|
|
|
|
|
|
|
+ //use the detail template to generate html
|
|
|
|
|
+ // and put it in the DOM
|
|
|
|
|
+ var html = detail_template(data);
|
|
|
$('#content').html(html);
|
|
$('#content').html(html);
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ $("#modalbtn").click(function () {
|
|
|
|
|
+ //use the modal template to generate html
|
|
|
|
|
+ // and put it in the DOM
|
|
|
|
|
+ var html = modal_template(data);
|
|
|
|
|
+ $('#content').html(html);
|
|
|
|
|
+
|
|
|
|
|
+ /* we can only show the modal once the
|
|
|
|
|
+ template has been instantiated
|
|
|
|
|
+ because it does not exist before */
|
|
|
|
|
+ $("#imageModal").modal('show');
|
|
|
|
|
+
|
|
|
|
|
+ // create a call back for when the model is
|
|
|
|
|
+ // hidden so we can re-display the detail template
|
|
|
|
|
+ $('#imageModal').on('hidden.bs.modal', function () {
|
|
|
|
|
+ $("#detailsbtn").click();
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
</script>
|
|
</script>
|
|
|
</body>
|
|
</body>
|
