Use Mustache.js

davorg · Feb 23, 2016 · 767daa8 · 767daa8
1 parent ea3e37b
commit 767daa8
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/step06/Todo/public/javascripts/mustache.min.js b/step06/Todo/public/javascripts/mustache.min.js
diff --git a/step06/Todo/views/.index.tt.swp b/step06/Todo/views/.index.tt.swp
diff --git a/step06/Todo/views/index.tt b/step06/Todo/views/index.tt
@@ -9,7 +9,6 @@ var items = [
    overdue:     <% item.overdue %>,
    due:         "<% item.due.strftime('%A %d %B') %>",
    panel_class: "<% IF item.done %>success<% ELSIF item.overdue %>danger<% ELSE %>info<% END %>",
-   status:      "<% IF item.done %>done<% ELSIF item.overdue %>overdue<% ELSE %>due<% END %>"
 }<% UNLESS loop.last %>,<% END %>
 <% END -%>
 ];
@@ -18,15 +17,20 @@ var items = [
   </div>
 </div>
 
+<script id="item-template" type="text/template">
+{{#items}}
+<div class="panel panel-{{panel_class}}">
+  <div class="panel-heading"><h3 class="panel-title">{{counter}}: {{title}}</h3></div>
+  <div class="panel-body"><p>{{description}}</p>
+    <p class="text-right"><small>Due: {{due}}</small></p></div>
+</div>
+{{/items}}
+</script>
+
 <script>
 $( document ).ready(function() {
-  for ( var i = 0; i < items.length; i++ ) {
-    var item = items[i];
-    $('#list').append('<div class="panel panel-' + item.panel_class + '">'
-      + '<div class="panel-heading"><h3 class="panel-title">' + item.counter
-      + ': ' + item.title + '</h3></div>'
-      + '<div class="panel-body"><p>' + item.description + '</p>'
-      + '<p class="text-right"><small>Due: ' + item.due + '</small></p></div>');
-  }
+  var template = $('#item-template').html();
+  var list = Mustache.render(template, { items: items });
+  $('#list').append(list);
 });
 </script>
diff --git a/step06/Todo/views/layouts/main.tt b/step06/Todo/views/layouts/main.tt
@@ -21,10 +21,10 @@
   <body role="document">
     <!-- Bootstrap core JavaScript
     ================================================== -->
-    <!-- Placed at the end of the document so the pages load faster -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="/javascripts/jquery-2.2.0.min.js"><\/script>')</script>
     <script src="/javascripts/bootstrap.min.js"></script> 
+    <script src="/javascripts/mustache.min.js"></script> 
 
     <!-- Fixed navbar -->
     <nav class="navbar navbar-inverse navbar-fixed-top">