hace 8 años · 093402641d
--- a/assignment.js
+++ b/assignment.js
@@ -0,0 +1,46 @@
 
				+const EVENT_TEMPLATES_LOADED = "templates:loaded";
			
 
				+
			
 
				+const templateNames = [
			
 
				+  "class",
			
 
				+  "home",
			
 
				+  "species"
			
 
				+];
			
 
				+
			
 
				+const partialNames = [
			
 
				+  "nav"
			
 
				+];
			
 
				+
			
 
				+var templates = {};
			
 
				+var $content = null;
			
 
				+
			
 
				+function checkLoad($target) {
			
 
				+  if (Object.keys(templates).length === templateNames.length + partialNames.length) {
			
 
				+    $target.trigger(EVENT_TEMPLATES_LOADED);
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+$(document).ready(function () {
			
 
				+  $content = $("#content");
			
 
				+
			
 
				+  templateNames.forEach(function (name) {
			
 
				+    const path = "templates/" + name + ".hbs";
			
 
				+
			
 
				+    $.get(path, function (data) {
			
 
				+      templates[name] = Handlebars.compile(data);
			
 
				+      checkLoad($content);
			
 
				+    }, "html");
			
 
				+  });
			
 
				+
			
 
				+  partialNames.forEach(function (name) {
			
 
				+    const path = "templates/" + name + ".hbs";
			
 
				+    $.get(path, function (data) {
			
 
				+      templates[name] = Handlebars.compile(data);
			
 
				+      Handlebars.registerPartial(name, templates[name]);
			
 
				+      checkLoad($content);
			
 
				+    }, "html");
			
 
				+  });
			
 
				+
			
 
				+  $content.on(EVENT_TEMPLATES_LOADED, {}, function () {
			
 
				+    $(this).html(templates.home());
			
 
				+  });
			
 
				+});
			
--- a/index.html
+++ b/index.html
@@ -10,13 +10,21 @@
 
				   <script type="text/javascript" src="js/bootstrap.js"></script>
			
 
				   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
			
 
				 
			
 
				+  <!-- Templates -->
			
 
				+  <script id="tpl-nav" type="text/x-handlebars-template" src="templates/nav.hbs"></script>
			
 
				+  <script id="tpl-home" type="text/x-handlebars-template" src="templates/home.hbs"></script>
			
 
				+  <script id="tpl-class" type="text/x-handlebars-template" src="templates/class.hbs"></script>
			
 
				+  <script id="tpl-species" type="text/x-handlebars-template" src="templates/species.hbs"></script>
			
 
				+
			
 
				   <!-- Custom code -->
			
 
				   <script type="text/javascript" src="AnimalsData.js"></script>
			
 
				   <script type="text/javascript" src="assignment.js"></script>
			
 
				+
			
 
				   <link rel="stylesheet" type="text/css" href="assignment.css" />
			
 
				 </head>
			
 
				 
			
 
				 <body>
			
 
				-  <!-- put your HTML here -->
			
 
				+
			
 
				+  <div id="content"></div>
			
 
				 
			
 
				 </body>
			
--- a/templates/class.hbs
+++ b/templates/class.hbs
@@ -0,0 +1,3 @@
 
				+<div class="class">
			
 
				+  CLASS
			
 
				+</div>
			
--- a/templates/home.hbs
+++ b/templates/home.hbs
@@ -0,0 +1,3 @@
 
				+<div class="home">
			
 
				+  HOME
			
 
				+</div>
			
--- a/templates/nav.hbs
+++ b/templates/nav.hbs
@@ -0,0 +1,9 @@
 
				+<div class="nav">
			
 
				+  <nav role="navigation">
			
 
				+    <div class="nav navbar-default">
			
 
				+      <div class="navbar-brand">
			
 
				+        <a href="https://www.youtube.com/watch?v=HDH6dcbRtuU&amp;feature=youtu.be&amp;t=37s" title="Animals: Dogs">Animals</a>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </nav>
			
 
				+</div>
			
--- a/templates/species.hbs
+++ b/templates/species.hbs
@@ -0,0 +1,3 @@
 
				+<div class="species">
			
 
				+  SPECIES
			
 
				+</div>