fgm
/
front__coursera-responsive-design


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!-- 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: "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);

    // add the HTML to the content div
    $('#content').html(html);
  </script>

</body>