Home Explore Help
Sign In
fgm
/
front__coursera-responsive-design
1
0
Fork 0
Files Issues 0 Pull Requests 0
Browse Source

Templates and partial loaded from separate files.

Frederic G. MARAND 9 years ago
parent
1c8360cd1f
commit
093402641d
6 changed files with 73 additions and 1 deletions
Unified View Show Diff Stats
  1. 46 0
      assignment.js
  2. 9 1
      index.html
  3. 3 0
      templates/class.hbs
  4. 3 0
      templates/home.hbs
  5. 9 0
      templates/nav.hbs
  6. 3 0
      templates/species.hbs

+ 46 - 0
assignment.js
View File 

@@ -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());
 
+  });
 
+});

+ 9 - 1
index.html
View File 

@@ -10,13 +10,21 @@
 
   <script type="text/javascript" src="js/bootstrap.js"></script>
 
   <script type="text/javascript" src="js/bootstrap.js"></script>
 
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
 
   <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 -->
 
   <!-- Custom code -->
 
   <script type="text/javascript" src="AnimalsData.js"></script>
 
   <script type="text/javascript" src="AnimalsData.js"></script>
 
   <script type="text/javascript" src="assignment.js"></script>
 
   <script type="text/javascript" src="assignment.js"></script>
 
+
 
   <link rel="stylesheet" type="text/css" href="assignment.css" />
 
   <link rel="stylesheet" type="text/css" href="assignment.css" />
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-  <!-- put your HTML here -->
 
+
 
+  <div id="content"></div>
 
 
 
 </body>
 
 </body>

+ 3 - 0
templates/class.hbs
View File 

@@ -0,0 +1,3 @@
 
+<div class="class">
 
+  CLASS
 
+</div>

+ 3 - 0
templates/home.hbs
View File 

@@ -0,0 +1,3 @@
 
+<div class="home">
 
+  HOME
 
+</div>

+ 9 - 0
templates/nav.hbs
View File 

@@ -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>

+ 3 - 0
templates/species.hbs
View File 

@@ -0,0 +1,3 @@
 
+<div class="species">
 
+  SPECIES
 
+</div>