[#39,refactor/template][m]: switch to mustache.js for templating - fixes

#39.
okfn · Jun 2, 2012 · 71ed115 · 71ed115
1 parent 3f48a4d
commit 71ed115
Show file tree

Hide file tree

Showing 13 changed files with 610 additions and 577 deletions.
diff --git a/src/view.dataset.edit.js b/src/view.dataset.edit.js
@@ -13,7 +13,7 @@ CKAN.View = CKAN.View || {};
         </label> \
       </dt> \
       <dd> \
-        <input id="Dataset--title" name="Dataset--title" type="text" value="${dataset.title}" placeholder="A title (not a description) ..."/> \
+        <input id="Dataset--title" name="Dataset--title" type="text" value="{{dataset.title}}" placeholder="A title (not a description) ..."/> \
       </dd> \
  \
       <dt> \
@@ -25,7 +25,7 @@ CKAN.View = CKAN.View || {};
         </label> \
       </dt> \
       <dd> \
-        <input id="Dataset--name" maxlength="100" name="Dataset--name" type="text" value="${dataset.name}" placeholder="A shortish name usable in urls ..." /> \
+        <input id="Dataset--name" maxlength="100" name="Dataset--name" type="text" value="{{dataset.name}}" placeholder="A shortish name usable in urls ..." /> \
       </dd> \
  \
       <dt> \
@@ -54,7 +54,7 @@ CKAN.View = CKAN.View || {};
             <li><a href="#" action="write" class="selected">Write</a></li> \
             <li><a href="#" action="preview">Preview</a></li> \
           </ul> \
-          <textarea id="Dataset--notes" name="Dataset--notes" placeholder="Start with a summary sentence ...">${dataset.notes}</textarea> \
+          <textarea id="Dataset--notes" name="Dataset--notes" placeholder="Start with a summary sentence ...">{{dataset.notes}}</textarea> \
           <div id="Dataset--notes-preview" class="preview" style="display: none;"> \
           <div> \
         </div> \
@@ -75,7 +75,7 @@ CKAN.View = CKAN.View || {};
       tmplData = {
         dataset: this.model.toTemplateJSON()
       }
-      var tmpl = $.tmpl(this.template, tmplData);
+      var tmpl = Mustache.render(this.template, tmplData);
       $(this.el).html(tmpl);
       return this;
     },

diff --git a/src/view.dataset.list.js b/src/view.dataset.list.js
@@ -68,29 +68,29 @@ CKAN.View = CKAN.View || {};
       template: '\
         <div class="header"> \
           <span class="title" > \
-            <a href="${urls.datasetView}" ckan-attrname="title" class="editable">${displaytitle}</a> \
+            <a href="{{urls.datasetView}}" ckan-attrname="title" class="editable">{{displaytitle}}</a> \
           </span> \
           <div class="search_meta"> \
-            {{if formats.length > 0}} \
+            {{#formats}} \
             <ul class="dataset-formats"> \
-              {{each formats}} \
-                <li>${$value}</li> \
-              {{/each}} \
+              {{#formats}} \
+                <li>{{.}}</li> \
+              {{/formats}} \
             </ul> \
-            {{/if}} \
+            {{/formats}} \
           </div> \
         </div> \
         <div class="extract"> \
-          {{html snippet}} \
+          {{{snippet}}} \
         </div> \
         <div class="dataset-tags"> \
-          {{if tags.length}} \
+          {{#tags}} \
           <ul class="dataset-tags"> \
-            {{each tags}} \
-              <li>${$value}</li> \
-            {{/each}} \
+            {{#tags}} \
+              <li>{{.}}</li> \
+            {{/tags}} \
           </ul> \
-          {{/if}} \
+          {{/tags}} \
         </div> \
       '
     },
@@ -114,7 +114,7 @@ CKAN.View = CKAN.View || {};
         formats: this._availableFormats(),
         urls: urls
       });
-      this.el.html($.tmpl(this.options.template, data));
+      this.el.html(Mustache.render(this.options.template, data));
       return this;
     },
 

diff --git a/src/view.dataset.view.js b/src/view.dataset.view.js
@@ -5,21 +5,18 @@ CKAN.View = CKAN.View || {};
 
   my.DatasetFullView = Backbone.View.extend({
     template: ' \
-  <div class="dataset view" dataset-id="${dataset.id}"> \
+  <div class="dataset view" dataset-id="{{dataset.id}}"> \
     <div class="extract"> \
-      ${dataset.snippet} \
-      {{if dataset.snippet.length > 50}} \
-      <a href="#anchor-notes">Read more</a> \
-      {{/if}} \
+      {{dataset.snippet}} \
     </div> \
     <div class="tags"> \
-      {{if dataset.tags.length}} \
+      {{#dataset.tags.length}} \
       <ul class="dataset-tags"> \
-        {{each dataset.tags}} \
-          <li>${$value}</li> \
-        {{/each}} \
+        {{#dataset.tags}} \
+          <li>{{.}}</li> \
+        {{/dataset.tags}} \
       </ul> \
-      {{/if}} \
+      {{/dataset.tags.length}} \
     </div> \
     <div class="resources subsection"> \
       <h3>Resources</h3> \
@@ -29,24 +26,23 @@ CKAN.View = CKAN.View || {};
           <th>Format</th> \
           <th>Actions</th> \
         </tr> \
-        {{each dataset.resources}} \
+        {{#dataset.resources}} \
         <tr> \
           <td> \
-            <a href="#dataset/${dataset.id}/resource/${$value.id}"> \
-            {{if $value.description}} \
-            ${$value.description} \
-            {{else}} \
+            <a href="#dataset/{{dataset.id}}/resource/{{id}}"> \
+            {{description}} \
+            {{^description.length}} \
             (No description) \
-            {{/if}} \
+            {{/description.length}} \
             </a> \
           </td> \
-          <td>${$value.format}</td> \
-          <td><a href="${$value.url}" target="_blank" class="resource-download">Download</a> \
+          <td>{{format}}</td> \
+          <td><a href="{{url}}" target="_blank" class="resource-download">Download</a> \
         </tr> \
-        {{/each}} \
-        {{if !dataset.resources.length }} \
+        {{/dataset.resources}} \
+        {{^dataset.resources}} \
         <tr><td>No resources.</td><td></td></tr> \
-        {{/if}} \
+        {{/dataset.resources}} \
       </table> \
       <div class="add-resource"> \
         <a href="#" class="action-add-resource">Add a resource</a> \
@@ -56,9 +52,9 @@ CKAN.View = CKAN.View || {};
       <h3 id="anchor-notes">Notes</h3> \
       <div class="notes-body editable-area" backbone-attribute="notes"> \
         {{html dataset.notesHtml}} \
-        {{if !dataset.notes || dataset.notes.length === 0}} \
+        {{^dataset.notes}} \
         <em>No notes yet. Click to add some ...</em> \
-        {{/if}} \
+        {{/dataset.notes}} \
       </div> \
     </div> \
     <div class="details subsection"> \
@@ -73,18 +69,18 @@ CKAN.View = CKAN.View || {};
         <tbody> \
           <tr> \
             <td>Creator</td> \
-            <td>${dataset.author}</td> \
+            <td>{{dataset.author}}</td> \
           </tr> \
           <tr> \
             <td>Maintainer</td> \
-            <td>${dataset.maintainer}</td> \
+            <td>{{dataset.maintainer}}</td> \
           </tr> \
-          {{each dataset.extras}} \
+          {{#dataset.extras}} \
           <tr> \
-            <td class="package-label" property="rdfs:label">${$index}</td> \
-            <td class="package-details" property="rdf:value">${$value}</td> \
+            <td class="package-label" property="rdfs:label">{{.}}</td> \
+            <td class="package-details" property="rdf:value">{{.}}</td> \
           </tr> \
-          {{/each}} \
+          {{/dataset.extras}} \
         </tbody> \
       </table> \
     </div> \
@@ -95,21 +91,21 @@ CKAN.View = CKAN.View || {};
     <li class="widget-container widget_text"> \
       <h3>Connections</h3> \
       <ul> \
-        {{each dataset.relationships}} \
+        {{#dataset.relationships}} \
         <li> \
-          ${$value.type} dataset \
-          <a href="#dataset/${$value.object}/view">${$value.object}</a> \
-          {{if $value.comment}} \
+          {{type}} dataset \
+          <a href="#dataset/{{object}}/view">{{object}}</a> \
+          {{#comment}} \
           <span class="relationship_comment"> \
-            (${$value.comment}) \
+            ({{comment}}) \
           </span> \
-          {{/if}} \
+          {{/comment}} \
         </li> \
-        {{/each}} \
+        {{/dataset.relationships}} \
       </ul> \
-      {{if dataset.relationships.length == 0}} \
+      {{^dataset.relationships}} \
       No connections to other datasets. \
-      {{/if}} \
+      {{/dataset.relationships}} \
     </li> \
 ',
     initialize: function() {
@@ -151,8 +147,8 @@ CKAN.View = CKAN.View || {};
         dataset: this.model.toTemplateJSON(),
       };
       $('.page-heading').html(tmplData.dataset.displaytitle);
-      $('#sidebar .widget-list').html($.tmpl(this.templateSidebar, tmplData));
-      this.el.html($.tmpl(this.template, tmplData));
+      $('#sidebar .widget-list').html(Mustache.render(this.templateSidebar, tmplData));
+      this.el.html(Mustache.render(this.template, tmplData));
       this.setupEditable();
       return this;
     },

diff --git a/src/view.js b/src/view.js
@@ -14,10 +14,8 @@ CKAN.View = CKAN.View || {};
   };
 
   my.NotificationView = Backbone.View.extend({
+    template: '<div class="flash-banner {{type}}">{{message}} <button>X</button></div>',
     initialize: function() {
-      $.template('notificationTemplate',
-          '<div class="flash-banner ${type}">${message} <button>X</button></div>');
-
       var self = this;
       $(document).bind('notification', function(e, msg, type) {
         self.render(msg, type)
@@ -29,7 +27,7 @@ CKAN.View = CKAN.View || {};
     },
 
     render: function(msg, type) {
-      var _out = $.tmpl('notificationTemplate', {'message': msg, 'type': type})
+      var _out = Mustache.render(this.template, {'message': msg, 'type': type})
       this.el.html(_out);
       this.el.slideDown(400);
     },

diff --git a/src/view.resource.create.js b/src/view.resource.create.js
@@ -43,7 +43,7 @@ CKAN.View = CKAN.View || {};
       this.el.empty();
       tmplData = {
       };
-      var tmpl = $.tmpl(this.template, tmplData);
+      var tmpl = Mustache.render(this.template, tmplData);
       this.el.html(tmpl);
       return this;
     },

diff --git a/src/view.resource.edit.js b/src/view.resource.edit.js
@@ -13,7 +13,7 @@ CKAN.View = CKAN.View || {};
         </label> \
       </dt> \
       <dd> \
-        <input id="Resource--url" name="Resource--url" type="text" value="${url}" placeholder="http://mydataset.com/file.csv" /> \
+        <input id="Resource--url" name="Resource--url" type="text" value="{{url}}" placeholder="http://mydataset.com/file.csv" /> \
       </dd> \
       <dt> \
         <label class="field_opt" for="Resource--type"> \
@@ -41,7 +41,7 @@ CKAN.View = CKAN.View || {};
         </label> \
       </dt> \
       <dd> \
-        <input id="Resource--description" name="Resource--description" type="text" value="${description}" placeholder="A short description ..."/> \
+        <input id="Resource--description" name="Resource--description" type="text" value="{{description}}" placeholder="A short description ..."/> \
       </dd> \
  \
  \
@@ -51,7 +51,7 @@ CKAN.View = CKAN.View || {};
         </label> \
       </dt> \
       <dd> \
-        <input id="Resource--format" name="Resource--format" type="text" value="${format}" placeholder="e.g. csv, zip:csv (zipped csv), sparql"/> \
+        <input id="Resource--format" name="Resource--format" type="text" value="{{format}}" placeholder="e.g. csv, zip:csv (zipped csv), sparql"/> \
       </dd> \
     </fieldset> \
  \
@@ -61,7 +61,7 @@ CKAN.View = CKAN.View || {};
   </form> \
 ',
     render: function() {
-      var tmpl = $.tmpl(this.template, this.model.toJSON());
+      var tmpl = Mustache.render(this.template, this.model.toJSON());
       $(this.el).html(tmpl);
       return this;
     },

diff --git a/src/view.resource.upload.js b/src/view.resource.upload.js
@@ -39,7 +39,7 @@ CKAN.View = CKAN.View || {};
       this.el.empty();
       tmplData = {
       }
-      var tmpl = $.tmpl(this.template, tmplData);
+      var tmpl = Mustache.render(this.template, tmplData);
       this.el.html(tmpl);
       this.$messages = this.el.find('.messages');
       this.setupFileUpload();
@@ -104,10 +104,10 @@ CKAN.View = CKAN.View || {};
         async: false,
         success: function(data) {
           self.el.find('form').attr('action', data.action);
-          _tmpl = '<input type="hidden" name="${name}" value="${value}" />';
+          _tmpl = '<input type="hidden" name="{{name}}" value="{{value}}" />';
           var $hidden = $(self.el.find('form div.hidden-inputs')[0]);
           $.each(data.fields, function(idx, item) {
-            $hidden.append($.tmpl(_tmpl, item));
+            $hidden.append(Mustache.render(_tmpl, item));
           });
           self.hideMessage();
         },

diff --git a/src/view.resource.view.js b/src/view.resource.view.js
@@ -5,12 +5,12 @@ CKAN.View = CKAN.View || {};
 
   my.ResourceView = Backbone.View.extend({
     template: ' \
-  <div class="resource view" resource-id="${resource.id}"> \
+  <div class="resource view" resource-id="{{resource.id}}"> \
     <h3> \
-      <a href="${resource.url}" class="url">${resource.url}</a> [${resource.format}] \
+      <a href="{{resource.url}}" class="url">{{resource.url}}</a> [{{resource.format}}] \
     </h3> \
     <div class="description"> \
-      ${resource.description} \
+      {{resource.description}} \
     </div> \
     \
     <div class="details subsection"> \
@@ -23,12 +23,12 @@ CKAN.View = CKAN.View || {};
           </tr> \
         </thead> \
         <tbody> \
-          {{each resourceDetails}} \
+          {{#resourceDetails}} \
           <tr> \
-            <td class="label">${$index}</td> \
-            <td class="value">${$value}</td> \
+            <td class="label">{{.}}</td> \
+            <td class="value">{{.}}</td> \
           </tr> \
-          {{/each}} \
+          {{/resourceDetails}} \
         </tbody> \
       </table> \
     </div> \
@@ -65,7 +65,7 @@ CKAN.View = CKAN.View || {};
         }
       }
       $('.page-heading').html(tmplData.dataset.name + ' / ' + tmplData.resource.displaytitle);
-      var tmpl = $.tmpl(this.template, tmplData);
+      var tmpl = Mustache.render(this.template, tmplData);
       $(this.el).html(tmpl);
       return this;
     },

diff --git a/test/index.html b/test/index.html
@@ -15,12 +15,8 @@ <h1 id="qunit-header">Tests</h1>
   <h2 id="qunit-banner"></h2>
   <h2 id="qunit-userAgent"></h2>
   <ol id="qunit-tests"></ol>
-
-  <div>
-    <a href="#" id="show-fixtures">Show fixtures</a>
-  </div>
   </div>
-  <div class="fixture" style="display:none;">
+  <div class="fixture">
     <!-- search form -->
     <div id="search-page" class="page-view">
       <form id="search-form">
@@ -51,7 +47,7 @@ <h3>Results</h3>
     </div>
   </div>
   <script src="../vendor/jquery/1.6.2/jquery.js"></script>
-  <script src="../vendor/jquery.tmpl/beta1/jquery.tmpl.min.js"></script>
+  <script src="../vendor/mustache/0.5.0-dev/mustache.js"></script>
   <script src="../vendor/json2.js"></script>
   <script src="../vendor/jqueryui/1.8.4/jquery-ui.min.js"></script>
   <script src="../vendor/underscore/1.1.6/underscore.js"></script>
@@ -89,12 +85,5 @@ <h3>Results</h3>
   <script src="view/dataset-listing-test.js"></script>
   <script src="widget/search-test.js"></script>
   <script src="view-test.js"></script>
-  <script type="text/javascript">
-    $(document).ready(
-      $('#show-fixtures').click(function(e) {
-        jQuery('.fixture').show();
-      })
-    );
-  </script>
 </body>
 </html>