| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- <!-- 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>
- <script src="js/bootstrap.min.js"></script>
- <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">
- </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>
- <!-- javascript code to fill the template -->
- <script type="text/javascript">
- // grab our template code from the DOM
- 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"
- };
- // generate HTML from the data
- var html = template(data);
- // add the HTML to the content div
- $('#content').html(html);
- </script>
- </body>
|
