ianhoffman/js_template_example.html

## js_template_example.html
<!DOCTYPE html>
<html>
  <body>
    <div><h1>Testing...</h1></div>
    <div class="card-list" id="card-list"></div>
  </body>

  <script type="text/template" id="card-list-item">
    <div class="card-list-item">
      <h2 class="card-title"></h2>
      <span class="card-subtitle"></span>
    </div>
  </script>

  <script type="application/javascript">
    $(document).ready(function () {
      var $template = $('#card-list-item');
      var $html = $template.html();

      var cardData = [
        {
          title: 'foo',
          subtitle: 'bar'
        },
        {
          title: '1',
          subtitle: '77',
        }
      ];

      for (var i = 0; i < data.length; i++) {
        var $card = $($html);
        $card.find('.card-title').text(cardData[i].title);
        $card.find('.card-subtitle').text(cardData[i].subtitle);
        $('#card-list').append($card);
      }
    });
  </script>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<div><h1>Testing...</h1></div>
	<div class="card-list" id="card-list"></div>
	</body>

	<script type="text/template" id="card-list-item">
	<div class="card-list-item">
	<h2 class="card-title"></h2>
	<span class="card-subtitle"></span>
	</div>
	</script>

	<script type="application/javascript">
	$(document).ready(function () {
	var $template = $('#card-list-item');
	var $html = $template.html();

	var cardData = [
	{
	title: 'foo',
	subtitle: 'bar'
	},
	{
	title: '1',
	subtitle: '77',
	}
	];

	for (var i = 0; i < data.length; i++) {
	var $card = $($html);
	$card.find('.card-title').text(cardData[i].title);
	$card.find('.card-subtitle').text(cardData[i].subtitle);
	$('#card-list').append($card);
	}
	});
	</script>
	</html>