transparency - npm Package Compare versions

Comparing version 0.5.3 to 0.5.5

browser/spec/basics.spec.js

@@ -0,4 +1,5 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
 
-  if (typeof module !== 'undefined' && module.exports) {
+  if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
     require('./spec_helper');
@@ -10,48 +11,28 @@ window.Transparency = require('../src/transparency');
     it("should ignore null context", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-      </div>');
+      var data, expected, template;
+      template = $('<div></div>');
       data = {
         hello: 'Hello'
       };
-      expected = jQuery('<div>\
-      </div>');
-      window.Transparency.render(doc.find('.container').get(0), data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $('<div></div>');
+      window.Transparency.render(template.find('#not_found')[0], data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    it("should work with null data", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <div class="hello"></div>\
-          <div class="goodbye"></div>\
-        </div>\
-      </div>');
+    it("should render empty container for null data", function() {
+      var data, expected, template;
+      template = jQuery("<div class=\"container\">\n  <div class=\"hello\"></div>\n  <div class=\"goodbye\"></div>\n</div>");
       data = null;
-      expected = jQuery('<div>\
-        <div class="container">\
-        </div>\
-      </div>');
-      doc.find('.container').render(data);
-      expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n</div>");
+      template.render(data);
+      expect(template.html()).htmlToBeEqual(expected.html());
       data = {
         hello: 'Hello'
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <div class="hello">Hello</div>\
-          <div class="goodbye"></div>\
-        </div>\
-      </div>');
-      doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <div class=\"hello\">Hello</div>\n  <div class=\"goodbye\"></div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    it("should work with null values", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <div class="hello"></div>\
-          <div class="goodbye"></div>\
-        </div>\
-      </div>');
+    it("should ignore null values", function() {
+      var data, expected, template;
+      template = $("<div class=\"container\">\n  <div class=\"hello\"></div>\n  <div class=\"goodbye\"></div>\n</div>");
       data = {
@@ -61,42 +42,21 @@ hello: 'Hello',
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <div class="hello">Hello</div>\
-          <div class="goodbye"></div>\
-        </div>\
-      </div>');
-      doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <div class=\"hello\">Hello</div>\n  <div class=\"goodbye\"></div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    it("should assing data values to template via CSS", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <div class="hello"></div>\
-          <div class="goodbye"></div>\
-        </div>\
-      </div>');
+    it("should match model keys to template by element id, class, name attribute and data-bind attribute", function() {
+      var data, expected, template;
+      template = $("<div class=\"container\">\n  <div id=\"my-id\"></div>\n  <div class=\"my-class\"></div>\n  <div data-bind=\"my-data\"></div>\n</div>");
       data = {
-        hello: 'Hello',
-        goodbye: 'Goodbye!'
+        'my-id': 'id-data',
+        'my-class': 'class-data',
+        'my-data': 'data-bind'
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <div class="hello">Hello</div>\
-          <div class="goodbye">Goodbye!</div>\
-        </div>\
-      </div>');
-      doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <div id=\"my-id\">id-data</div>\n  <div class=\"my-class\">class-data</div>\n  <div data-bind=\"my-data\">data-bind</div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     it("should handle nested templates", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <div class="greeting">\
-            <span class="name"></span>\
-            <div class="greeting"></div>\
-          </div>\
-        </div>\
-      </div>');
+      var data, expected, template;
+      template = $("<div class=\"container\">\n  <div class=\"greeting\">\n    <span class=\"name\"></span>\n    <div class=\"greeting\"></div>\n  </div>\n</div>");
       data = {
@@ -106,20 +66,9 @@ greeting: 'Hello',
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <div class="greeting">Hello<span class="name">World</span>\
-            <div class="greeting">Hello</div>\
-          </div>\
-        </div>\
-      </div>');
-      doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <div class=\"greeting\">Hello<span class=\"name\">World</span>\n    <div class=\"greeting\">Hello</div>\n  </div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     it("should work with numeric values", function() {
-      var data, doc, expected, res;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <div class="hello"></div>\
-          <div class="goodbye"></div>\
-        </div>\
-      </div>');
+      var data, expected, template;
+      template = $("<div class=\"container\">\n  <div class=\"hello\"></div>\n  <div class=\"goodbye\"></div>\n</div>");
       data = {
@@ -129,44 +78,19 @@ hello: 'Hello',
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <div class="hello">Hello</div>\
-          <div class="goodbye">5</div>\
-        </div>\
-      </div>');
-      res = doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <div class=\"hello\">Hello</div>\n  <div class=\"goodbye\">5</div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    it("should match by element id, class, name and data-bind", function() {
-      var data, doc, expected, res;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <div id="my-id"></div>\
-          <div class="my-class"></div>\
-          <div data-bind="my-data"></div>\
-        </div>\
-      </div>');
+    it("should work with date objects", function() {
+      var data, expected, template;
+      template = $("<div class=\"container\">\n  <div class=\"best_before\"></div>\n</div>");
       data = {
-        'my-id': 'id-data',
-        'my-class': 'class-data',
-        'my-data': 'data-bind'
+        best_before: new Date(0)
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <div id="my-id">id-data</div>\
-          <div class="my-class">class-data</div>\
-          <div data-bind="my-data">data-bind</div>\
-        </div>\
-      </div>');
-      res = doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <div class=\"best_before\">1970-01-01T00:00:00.000Z</div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    return it("should ignore functions in objects", function() {
-      var data, doc, expected, res;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <div class="hello"></div>\
-          <div class="goodbye"></div>\
-          <div class="skipped"></div>\
-        </div>\
-      </div>');
+    it("should ignore functions in models", function() {
+      var data, expected, template;
+      template = $("<div class=\"container\">\n  <div class=\"hello\"></div>\n  <div class=\"goodbye\"></div>\n  <div class=\"skipped\"></div>\n</div>");
       data = {
@@ -179,14 +103,19 @@ hello: 'Hello',
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <div class="hello">Hello</div>\
-          <div class="goodbye">5</div>\
-          <div class="skipped"></div>\
-        </div>\
-      </div>');
-      res = doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <div class=\"hello\">Hello</div>\n  <div class=\"goodbye\">5</div>\n  <div class=\"skipped\"></div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
+    return it("should preserve text between template elements", function() {
+      var data, expected, template;
+      template = $("<li class=\"foo\">\n<span data-bind=\"begin\"></span> - <span data-bind=\"end\"></span>\n</li>");
+      data = {
+        begin: 'asdf',
+        end: 'fdsa'
+      };
+      expected = $("<li class=\"foo\">\n<span data-bind=\"begin\">asdf</span> - <span data-bind=\"end\">fdsa</span>\n</li>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
+    });
   });
 
 }).call(this);

browser/spec/cached_templates.spec.js

@@ -0,1 +1,2 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
@@ -2,0 +3,0 @@

browser/spec/data_references_spec.js

@@ -0,6 +1,8 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
+  var Transparency;
 
-  if (typeof module !== 'undefined' && module.exports) {
+  if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
     require('./spec_helper');
-    require('../src/transparency');
+    Transparency = require('../src/transparency');
   }
@@ -7,0 +9,0 @@

browser/spec/directives.spec.js

@@ -0,6 +1,8 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
+  var Transparency;
 
-  if (typeof module !== 'undefined' && module.exports) {
+  if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
     require('./spec_helper');
-    window.Transparency = require('../src/transparency');
+    Transparency = require('../src/transparency');
   }
@@ -10,8 +12,4 @@
     it("should calculate values with directives", function() {
-      var directives, doc, expected, person;
-      doc = jQuery('<div>\
-        <div class="person">\
-          <span class="name"></span><span class="email"></span>\
-        </div>\
-      </div>');
+      var directives, expected, person, template;
+      template = $("<div class=\"person\">\n  <span class=\"name\"></span><span class=\"email\"></span>\n</div>");
       person = {
@@ -27,18 +25,9 @@ firstname: 'Jasmine',
       };
-      expected = jQuery('<div>\
-        <div class="person">\
-          <span class="name">Jasmine Taylor</span>\
-          <span class="email">[e-mail]</span>\
-        </div>\
-      </div>');
-      doc.find('.person').render(person, directives);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"person\">\n  <span class=\"name\">Jasmine Taylor</span>\n  <span class=\"email\">[e-mail]</span>\n</div>");
+      template.render(person, directives);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     it("should render html content with directives", function() {
-      var directives, doc, expected, person;
-      doc = jQuery('<div>\
-        <div class="person">\
-          <div class="name"><div>FOOBAR</div></div><span class="email"></span>\
-        </div>\
-      </div>');
+      var directives, expected, person, template;
+      template = $("<div class=\"person\">\n  <div class=\"name\"><div>FOOBAR</div></div><span class=\"email\"></span>\n</div>");
       person = {
@@ -56,29 +45,13 @@ firstname: '<b>Jasmine</b>',
       };
-      expected = jQuery('<div>\
-        <div class="person">\
-          <div class="name"><b>Jasmine</b> <i>Taylor</i><div>FOOBAR</div></div>\
-          <span class="email">[e-mail]</span>\
-        </div>\
-      </div>');
-      doc.find('.person').render({
+      expected = $("<div class=\"person\">\n  <div class=\"name\"><b>Jasmine</b> <i>Taylor</i><div>FOOBAR</div></div>\n  <span class=\"email\">[e-mail]</span>\n</div>");
+      template.render({
         firstname: "Hello",
         lastname: "David"
       }, directives);
-      doc.find('.person').render(person, directives);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      template.render(person, directives);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     it("should handle nested directives", function() {
-      var directives, doc, expected, nameDecorator, person;
-      doc = jQuery('<div>\
-        <div class="person">\
-          <span class="name"></span>\
-          <span class="email"></span>\
-          <div class="friends">\
-            <div class="friend">\
-              <span class="name"></span>\
-              <span class="email"></span>\
-            </div>\
-          </div>\
-        </div>\
-      </div>');
+      var directives, expected, nameDecorator, person, template;
+      template = $("<div class=\"person\">\n  <span class=\"name\"></span>\n  <span class=\"email\"></span>\n  <div class=\"friends\">\n    <div class=\"friend\">\n      <span class=\"name\"></span>\n      <span class=\"email\"></span>\n    </div>\n  </div>\n</div>");
       person = {
@@ -109,28 +82,9 @@ firstname: 'Jasmine',
       };
-      expected = jQuery('<div>\
-        <div class="person">\
-          <span class="name">Jasmine Taylor</span>\
-          <span class="email">[e-mail]</span>\
-          <div class="friends">\
-            <div class="friend">\
-              <span class="name">John Mayer</span>\
-              <span class="email">[e-mail]</span>\
-            </div>\
-            <div class="friend">\
-              <span class="name">Damien Rice</span>\
-              <span class="email">[e-mail]</span>\
-            </div>\
-          </div>\
-        </div>\
-      </div>');
-      doc.find('.person').render(person, directives);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"person\">\n  <span class=\"name\">Jasmine Taylor</span>\n  <span class=\"email\">[e-mail]</span>\n  <div class=\"friends\">\n    <div class=\"friend\">\n      <span class=\"name\">John Mayer</span>\n      <span class=\"email\">[e-mail]</span>\n    </div>\n    <div class=\"friend\">\n      <span class=\"name\">Damien Rice</span>\n      <span class=\"email\">[e-mail]</span>\n    </div>\n  </div>\n</div>");
+      template.render(person, directives);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     it("should restore the original attributes", function() {
-      var directives, doc, expected, persons;
-      doc = jQuery('<div>\
-        <ul id="persons">\
-          <li class="person"></li>\
-        </ul>\
-      </div>');
+      var directives, expected, persons, template;
+      template = $("<ul id=\"persons\">\n  <li class=\"person\"></li>\n</ul>");
       persons = [
@@ -152,20 +106,10 @@ {
       };
-      expected = jQuery('<div>\
-        <ul id="persons">\
-          <li class="person even">me</li>\
-          <li class="person odd">you</li>\
-          <li class="person even">others</li>\
-        </ul>\
-      </div>');
-      doc.find('#persons').render(persons, directives);
-      doc.find('#persons').render(persons, directives);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<ul id=\"persons\">\n  <li class=\"person even\">me</li>\n  <li class=\"person odd\">you</li>\n  <li class=\"person even\">others</li>\n</ul>");
+      template.render(persons, directives);
+      template.render(persons, directives);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     return it("should except the element has been manipulated in-place if directive functions return void", function() {
-      var directives, doc, expected, persons;
-      doc = jQuery('<div>\
-        <ul id="persons">\
-          <li class="person"></li>\
-        </ul>\
-      </div>');
+      var directives, expected, persons, template;
+      template = $("<ul id=\"persons\">\n  <li class=\"person\"></li>\n</ul>");
       persons = [
@@ -187,12 +131,6 @@ {
       };
-      expected = jQuery('<div>\
-        <ul id="persons">\
-          <li class="person" foobar="foo">daa</li>\
-          <li class="person" foobar="foo">daa</li>\
-          <li class="person" foobar="foo">daa</li>\
-        </ul>\
-      </div>');
-      doc.find('#persons').render(persons, directives);
-      doc.find('#persons').render(persons, directives);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<ul id=\"persons\">\n  <li class=\"person\" foobar=\"foo\">daa</li>\n  <li class=\"person\" foobar=\"foo\">daa</li>\n  <li class=\"person\" foobar=\"foo\">daa</li>\n</ul>");
+      template.render(persons, directives);
+      template.render(persons, directives);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
@@ -199,0 +137,0 @@ });

browser/spec/forms.spec.js

@@ -0,6 +1,8 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
+  var Transparency;
 
-  if (typeof module !== 'undefined' && module.exports) {
+  if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
     require('./spec_helper');
-    window.Transparency = require('../src/transparency');
+    Transparency = require('../src/transparency');
   }
@@ -10,7 +12,4 @@
     it("should render values to form inputs and textarea elements", function() {
-      var data, doc, expected;
-      doc = document.createElement('div');
-      doc.innerHTML = '<input name="name" type="text" />\
-      <input name="job" type="text" />\
-      <textarea name="resume"></textarea>';
+      var data, expected, template;
+      template = $("<div>\n  <input name=\"name\" type=\"text\" />\n  <input name=\"job\" type=\"text\" />\n  <textarea name=\"resume\"></textarea>\n</div>");
       data = {
@@ -21,16 +20,9 @@ name: 'John',
       };
-      expected = document.createElement('div');
-      expected.innerHTML = '<input name="name" type="text" value="John"/>\
-      <input name="job" type="text" value="Milkman"/>\
-      <textarea name="resume">Jack of all trades</textarea>';
-      jQuery(doc).render(data);
-      return expect(doc.innerHTML).htmlToBeEqual(expected.innerHTML);
+      expected = $("<div>\n  <input name=\"name\" type=\"text\" value=\"John\"/>\n  <input name=\"job\" type=\"text\" value=\"Milkman\"/>\n  <textarea name=\"resume\">Jack of all trades</textarea>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     it("should render values to option elements", function() {
-      var data, directives, doc, expected;
-      doc = document.createElement('form');
-      doc.innerHTML = '\
-      <select id="states">\
-        <option class="state"></option>\
-      </select>';
+      var data, directives, expected, template;
+      template = $("<form>\n  <select id=\"states\">\n    <option class=\"state\"></option>\n  </select>\n</form>");
       data = {
@@ -59,22 +51,9 @@ states: [
       };
-      expected = '\
-      <select id="states">\
-        <option class="state" value="1">Alabama</option>\
-        <option class="state" value="2">Alaska</option>\
-        <option class="state" value="3">Arizona</option>\
-      </select>';
-      jQuery(doc).render(data, directives);
-      return expect(doc.innerHTML).htmlToBeEqual(expected);
+      expected = $("<form>\n  <select id=\"states\">\n    <option class=\"state\" value=\"1\">Alabama</option>\n    <option class=\"state\" value=\"2\">Alaska</option>\n    <option class=\"state\" value=\"3\">Arizona</option>\n  </select>\n</form>");
+      template.render(data, directives);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    return it("should handle nested options", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="container">\
-          <h1 class="title"></h1>\
-          <p class="post"></p>\
-          <select class="comments">\
-            <option class="comment">test</option>\
-          </select>\
-        </div>\
-      </div>');
+    return it("should handle nested options elements", function() {
+      var data, expected, template;
+      template = $("<div class=\"container\">\n  <h1 class=\"title\"></h1>\n  <p class=\"post\"></p>\n  <select class=\"comments\">\n    <option class=\"comment\">test</option>\n  </select>\n</div>");
       data = {
@@ -91,14 +70,5 @@ title: 'Hello World',
       };
-      expected = jQuery('<div>\
-        <div class="container">\
-          <h1 class="title">Hello World</h1>\
-          <p class="post">Hi there it is me</p>\
-          <select class="comments">\
-            <option class="comment">John</option>\
-            <option class="comment">Arnold</option>\
-          </select>\
-        </div>\
-      </div>');
-      doc.find('.container').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"container\">\n  <h1 class=\"title\">Hello World</h1>\n  <p class=\"post\">Hi there it is me</p>\n  <select class=\"comments\">\n    <option class=\"comment\">John</option>\n    <option class=\"comment\">Arnold</option>\n  </select>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
@@ -105,0 +75,0 @@ });

browser/spec/lists.spec.js

@@ -0,7 +1,8 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
-  var Transparency, expectModelObjects;
+  var expectModelObjects;
 
-  if (typeof module !== 'undefined' && module.exports) {
+  if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
     require('./spec_helper');
-    window.Transparency = Transparency = require('../src/transparency');
+    window.Transparency = require('../src/transparency');
   }
@@ -11,9 +12,4 @@
     it("should render list of objects", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="comments">\
-          <div class="comment">\
-            <span class="name"></span><span class="text"></span></div>\
-        </div>\
-      </div>');
+      var data, expected, template;
+      template = $("<div class=\"comments\">\n  <div class=\"comment\">\n    <span class=\"name\"></span><span class=\"text\"></span>\n  </div>\n</div>");
       data = [
@@ -28,41 +24,19 @@ {
       ];
-      expected = jQuery('<div>\
-        <div class="comments">\
-          <div class="comment">\
-            <span class="name">John</span><span class="text">That rules</span>\
-          </div><div class="comment">\
-            <span class="name">Arnold</span><span class="text">Great post!</span>\
-          </div>\
-        </div>\
-      </div>');
-      doc.find('.comments').render(data);
-      expect(doc.html()).htmlToBeEqual(expected.html());
-      expect(window.Transparency.data(doc.find('.comment').get(0)).model).toEqual(data[0]);
-      return expectModelObjects(doc.find('.comment'), data);
+      expected = $("<div class=\"comments\">\n  <div class=\"comment\">\n    <span class=\"name\">John</span><span class=\"text\">That rules</span>\n  </div><div class=\"comment\">\n    <span class=\"name\">Arnold</span><span class=\"text\">Great post!</span>\n  </div>\n</div>");
+      template.render(data);
+      expect(template.html()).htmlToBeEqual(expected.html());
+      expect(template.find('.comment')[0].transparency.model).toEqual(data[0]);
+      return expectModelObjects(template.find('.comment'), data);
     });
     it("should render empty lists", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="comments">\
-          <div class="comment">\
-            <span class="name"></span>\
-            <span class="text"></span>\
-          </div>\
-        </div>\
-      </div>');
+      var data, expected, template;
+      template = $("<div class=\"comments\">\n  <div class=\"comment\">\n    <span class=\"name\"></span>\n    <span class=\"text\"></span>\n  </div>\n</div>");
       data = [];
-      expected = jQuery('<div>\
-        <div class="comments">\
-        </div>\
-      </div>');
-      doc.find('.comments').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"comments\">\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     it("should render lists with duplicate content", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div id="items">\
-          <div class="name"></div>\
-        </div>\
-      </div>');
+      var data, expected, template;
+      template = $("<div id=\"items\">\n  <div class=\"name\"></div>\n</div>");
       data = [
@@ -75,73 +49,31 @@ {
       ];
-      expected = jQuery('<div>\
-        <div id="items">\
-          <div class="name">Same</div>\
-          <div class="name">Same</div>\
-        </div>\
-      </div>');
-      doc.find('#items').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div id=\"items\">\n  <div class=\"name\">Same</div>\n  <div class=\"name\">Same</div>\n</div>");
+      template.render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    it("should render list containing simple values", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="comments">\
-          <span></span>\
-          <label>blah</label>\
-        </div>\
-      </div>');
-      data = ["That rules", "Great post!"];
-      expected = jQuery('<div>\
-        <div class="comments">\
-          <span>That rules</span><label>blah</label><span>Great post!</span><label>blah</label>\
-        </div>\
-      </div>');
-      doc.find('.comments').render(data);
-      expect(doc.html()).htmlToBeEqual(expected.html());
-      return expectModelObjects(doc.find('span'), data);
+    it("should render plain values with 'this.value' directives", function() {
+      var data, directives, expected, template;
+      template = $("<div class=\"comments\">\n  <label>Comment:</label>\n  <span class=\"comment\"></span>\n</div>");
+      data = ["That rules", "Great post!", 5];
+      directives = {
+        comment: function() {
+          return this.value;
+        }
+      };
+      expected = $("<div class=\"comments\">\n  <label>Comment:</label>\n  <span class=\"comment\">That rules</span>\n  <label>Comment:</label>\n  <span class=\"comment\">Great post!</span>\n  <label>Comment:</label>\n  <span class=\"comment\">5</span>\n</div>");
+      template.render(data, directives);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
-    it("should place simple value into element with listElement class if found", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="comments">\
-          <label>comment</label><span class="listElement"></span>\
-        </div>\
-      </div>');
-      data = ["That rules", "Great post!"];
-      expected = jQuery('<div>\
-        <div class="comments">\
-          <label>comment</label><span class="listElement">That rules</span>\
-          <label>comment</label><span class="listElement">Great post!</span>\
-        </div>\
-      </div>');
-      doc.find('.comments').render(data);
-      expect(doc.html()).htmlToBeEqual(expected.html());
-      return expectModelObjects(doc.find('.listElement'), data);
-    });
     it("should not fail when there's no child node in the simple list template", function() {
-      var data, doc, expected;
-      doc = jQuery('<div>\
-        <div class="comments">\
-        </div>\
-      </div>');
+      var data, expected, template;
+      template = $("<div class=\"comments\">\n</div>");
       data = ["That rules", "Great post!"];
-      expected = jQuery('<div>\
-        <div class="comments">\
-        </div>\
-      </div>');
-      doc.find('.comments').render(data);
-      return expect(doc.html()).htmlToBeEqual(expected.html());
+      expected = $("<div class=\"comments\">\n</div>");
+      template.find('.comments').render(data);
+      return expect(template.html()).htmlToBeEqual(expected.html());
     });
     return it("should match table rows to the number of model objects", function() {
-      var doc;
-      doc = jQuery('<div>\
-        <table>\
-          <tbody class="users">\
-            <tr>\
-              <td class="username"></td>\
-            </tr>\
-          </tbody>\
-        </table>\
-      </div>');
-      doc.find("tbody.users").render([
+      var template;
+      template = $("<table>\n  <tbody class=\"users\">\n    <tr>\n      <td class=\"username\">foobar</td>\n    </tr>\n  </tbody>\n</table>");
+      template.find(".users").render([
         {
@@ -153,16 +85,14 @@ username: 'user1'
       ]);
-      expect(doc.html()).htmlToBeEqual(jQuery('\
-      <div>\
-        <table>\
-          <tbody class="users">\
-            <tr>\
-              <td class="username">user1</td>\
-            </tr>\
-            <tr>\
-              <td class="username">user2</td>\
-            </tr>\
-          </tbody>\
-        </table>\
-      </div>').html());
-      doc.find("tbody.users").render([
+      expect(template.html()).htmlToBeEqual($('\
+      <table>\
+        <tbody class="users">\
+          <tr>\
+            <td class="username">user1</td>\
+          </tr>\
+          <tr>\
+            <td class="username">user2</td>\
+          </tr>\
+        </tbody>\
+      </table>').html());
+      template.find(".users").render([
         {
@@ -172,13 +102,11 @@ username: 'user1'
       ]);
-      expect(doc.html()).htmlToBeEqual(jQuery('\
-      <div>\
-        <table>\
-          <tbody class="users">\
-            <tr>\
-              <td class="username">user1</td>\
-            </tr>\
-          </tbody>\
-        </table>\
-      </div>').html());
-      doc.find("tbody.users").render([
+      expect(template.html()).htmlToBeEqual($('\
+      <table>\
+        <tbody class="users">\
+          <tr>\
+            <td class="username">user1</td>\
+          </tr>\
+        </tbody>\
+      </table>').html());
+      template.find(".users").render([
         {
@@ -190,16 +118,14 @@ username: 'user1'
       ]);
-      expect(doc.html()).htmlToBeEqual(jQuery('\
-      <div>\
-        <table>\
-          <tbody class="users">\
-            <tr>\
-              <td class="username">user1</td>\
-            </tr>\
-            <tr>\
-              <td class="username">user3</td>\
-            </tr>\
-          </tbody>\
-        </table>\
-      </div>').html());
-      doc.find("tbody.users").render([
+      expect(template.html()).htmlToBeEqual(jQuery('\
+      <table>\
+        <tbody class="users">\
+          <tr>\
+            <td class="username">user1</td>\
+          </tr>\
+          <tr>\
+            <td class="username">user3</td>\
+          </tr>\
+        </tbody>\
+      </table>').html());
+      template.find(".users").render([
         {
@@ -211,15 +137,13 @@ username: 'user4'
       ]);
-      return expect(doc.html()).htmlToBeEqual(jQuery('\
-      <div>\
-        <table>\
-          <tbody class="users">\
-            <tr>\
-              <td class="username">user4</td>\
-            </tr>\
-            <tr>\
-              <td class="username">user3</td>\
-            </tr>\
-          </tbody>\
-        </table>\
-      </div').html());
+      return expect(template.html()).htmlToBeEqual($('\
+      <table>\
+        <tbody class="users">\
+          <tr>\
+            <td class="username">user4</td>\
+          </tr>\
+          <tr>\
+            <td class="username">user3</td>\
+          </tr>\
+        </tbody>\
+      </table>').html());
     });
@@ -229,5 +153,5 @@ });
   expectModelObjects = function(elements, data) {
-    var i, object, _len, _results;
+    var i, object, _i, _len, _results;
     _results = [];
-    for (i = 0, _len = data.length; i < _len; i++) {
+    for (i = _i = 0, _len = data.length; _i < _len; i = ++_i) {
       object = data[i];
@@ -234,0 +158,0 @@ _results.push(expect(window.Transparency.data(elements.get(i)).model).toEqual(object));

browser/spec/nested_models.spec.js

@@ -0,6 +1,8 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
+  var Transparency;
 
-  if (typeof module !== 'undefined' && module.exports) {
+  if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
     require('./spec_helper');
-    require('../src/transparency');
+    Transparency = require('../src/transparency');
   }
@@ -7,0 +9,0 @@

browser/spec/spec_helper.js

@@ -0,10 +1,8 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
-  var jsdom;
 
-  if (typeof module !== 'undefined' && module.exports) {
-    jsdom = require('jsdom/lib/jsdom').jsdom;
-    global.document = jsdom("<html><head></head><body>hello world</body></html>");
+  if (typeof module !== "undefined" && module !== null ? module.exports : void 0) {
+    global.document = require('jsdom/lib/jsdom').jsdom("<!DOCTYPE html>\n<html>\n  <head>\n  </head>\n  <body>\n  </body>\n</html>");
     global.window = document.createWindow();
-    jsdom = require('jsdom');
-    global.jQuery = require('jquery');
+    global.jQuery = global.$ = require('jquery').create(window);
   }
@@ -11,0 +9,0 @@

lib/transparency.js

@@ -0,11 +1,12 @@
+// Generated by CoffeeScript 1.3.1
 (function() {
-  var ELEMENT_NODE, T, Transparency, cloneNode, debug, debugMode, elementMatcher, elementNodes, expando, matchingElements, prepareContext, renderChildren, renderDirectives, renderValues, setContent, setHtml, setText, _base,
-    __slice = Array.prototype.slice;
+  var ELEMENT_NODE, T, Transparency, cloneNode, debug, debugMode, elementMatcher, elementNodes, expando, html5Clone, isDate, matchingElements, pad, prepareContext, renderChildren, renderDirectives, renderValues, setAttribute, setContent, setHtml, setText, _base, _base1,
+    __slice = [].slice;
 
   if (typeof jQuery !== "undefined" && jQuery !== null) {
     jQuery.fn.render = function(models, directives, config) {
-      var t, _i, _len;
+      var context, _i, _len;
       for (_i = 0, _len = this.length; _i < _len; _i++) {
-        t = this[_i];
-        T.render(t, models, directives, config);
+        context = this[_i];
+        T.render(context, models, directives, config);
       }
@@ -50,21 +51,27 @@ return this;
   T.render = function(context, models, directives, config) {
-    var contextData, e, index, instance, model, parent, sibling, _i, _len, _len2, _ref;
+    var contextData, e, index, instance, model, parent, sibling, _i, _j, _len, _len1, _ref;
     debug = debugMode(config != null ? config.debug : void 0);
-    debug("Context", context, "Models", models, "Directives", directives, "Config", config);
-    if (!context) return;
+    debug("Context:", context, "Models:", models, "Directives:", directives, "Config:", config);
+    if (!context) {
+      return;
+    }
     models || (models = []);
     directives || (directives = {});
-    if (!Array.isArray(models)) models = [models];
+    if (!Array.isArray(models)) {
+      models = [models];
+    }
     sibling = context.nextSibling;
     parent = context.parentNode;
-    if (parent != null) parent.removeChild(context);
+    if (parent != null) {
+      parent.removeChild(context);
+    }
     prepareContext(context, models);
     contextData = T.data(context);
-    for (index = 0, _len = models.length; index < _len; index++) {
+    for (index = _i = 0, _len = models.length; _i < _len; index = ++_i) {
       model = models[index];
       instance = contextData.instances[index];
-      debug("Model", model, "Template instance", instance);
+      debug("Model:", model, "Template instance for the model:", instance);
       _ref = instance.elements;
-      for (_i = 0, _len2 = _ref.length; _i < _len2; _i++) {
-        e = _ref[_i];
+      for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
+        e = _ref[_j];
         T.data(e).model = model;
@@ -77,5 +84,9 @@ }
     if (sibling) {
-      if (parent != null) parent.insertBefore(context, sibling);
+      if (parent != null) {
+        parent.insertBefore(context, sibling);
+      }
     } else {
-      if (parent != null) parent.appendChild(context);
+      if (parent != null) {
+        parent.appendChild(context);
+      }
     }
@@ -86,3 +97,3 @@ return context;
   prepareContext = function(context, models) {
-    var attr, contextData, e, instance, n, value, _i, _j, _k, _len, _len2, _len3, _ref, _ref2, _ref3, _results;
+    var attr, contextData, e, instance, n, value, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2, _results;
     contextData = T.data(context);
@@ -99,3 +110,3 @@ contextData.template || (contextData.template = ((function() {
     contextData.instances || (contextData.instances = []);
-    debug("Template", contextData.template);
+    debug("Original template", contextData.template);
     while (models.length > contextData.instances.length) {
@@ -110,3 +121,3 @@ instance = contextData.instanceCache.pop() || {};
           n = _ref[_i];
-          if (n.nodeType === ELEMENT_NODE) _results.push(cloneNode(n));
+          _results.push(cloneNode(n));
         }
@@ -125,30 +136,30 @@ return _results;
       contextData.instanceCache.push(instance = contextData.instances.pop());
-      _ref2 = instance.template;
-      for (_j = 0, _len2 = _ref2.length; _j < _len2; _j++) {
-        n = _ref2[_j];
+      _ref1 = instance.template;
+      for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) {
+        n = _ref1[_j];
         n.parentNode.removeChild(n);
       }
     }
-    _ref3 = contextData.instances;
+    _ref2 = contextData.instances;
     _results = [];
-    for (_k = 0, _len3 = _ref3.length; _k < _len3; _k++) {
-      instance = _ref3[_k];
+    for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
+      instance = _ref2[_k];
       _results.push((function() {
-        var _l, _len4, _ref4, _results2;
-        _ref4 = instance.elements;
-        _results2 = [];
-        for (_l = 0, _len4 = _ref4.length; _l < _len4; _l++) {
-          e = _ref4[_l];
-          _results2.push((function() {
-            var _ref5, _results3;
-            _ref5 = T.data(e).attributes;
-            _results3 = [];
-            for (attr in _ref5) {
-              value = _ref5[attr];
-              _results3.push(e.setAttribute(attr, value));
+        var _l, _len3, _ref3, _results1;
+        _ref3 = instance.elements;
+        _results1 = [];
+        for (_l = 0, _len3 = _ref3.length; _l < _len3; _l++) {
+          e = _ref3[_l];
+          _results1.push((function() {
+            var _ref4, _results2;
+            _ref4 = T.data(e).attributes;
+            _results2 = [];
+            for (attr in _ref4) {
+              value = _ref4[attr];
+              _results2.push(setAttribute(e, attr, value));
             }
-            return _results3;
+            return _results2;
           })());
         }
-        return _results2;
+        return _results1;
       })());
@@ -161,28 +172,31 @@ }
     var element, key, value, _results;
-    if (typeof model === 'object') {
-      _results = [];
-      for (key in model) {
-        value = model[key];
-        if (typeof value !== 'object' && typeof value !== 'function') {
-          _results.push((function() {
-            var _i, _len, _ref, _results2;
-            _ref = matchingElements(instance, key);
-            _results2 = [];
-            for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-              element = _ref[_i];
-              _results2.push(setText(element, value));
-            }
-            return _results2;
-          })());
-        }
+    _results = [];
+    for (key in model) {
+      value = model[key];
+      if (!(typeof model === 'object')) {
+        continue;
       }
-      return _results;
-    } else {
-      element = matchingElements(instance, 'listElement')[0] || instance.elements[0];
-      if (element) return setText(element, model);
+      if (isDate(value)) {
+        value = value.toISOString();
+      }
+      if (typeof value !== 'object' && typeof value !== 'function') {
+        _results.push((function() {
+          var _i, _len, _ref, _results1;
+          _ref = matchingElements(instance, key);
+          _results1 = [];
+          for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+            element = _ref[_i];
+            _results1.push(setText(element, value));
+          }
+          return _results1;
+        })());
+      } else {
+        _results.push(void 0);
+      }
     }
+    return _results;
   };
 
   renderDirectives = function(instance, model, directives, index) {
-    var attr, directive, directiveFunction, element, elementData, key, value, _results;
+    var attr, directive, directiveFunction, element, key, value, _results;
     _results = [];
@@ -193,10 +207,14 @@ for (key in directives) {
         _results.push((function() {
-          var _i, _len, _ref, _results2;
+          var _i, _len, _ref, _results1;
           _ref = matchingElements(instance, key);
-          _results2 = [];
+          _results1 = [];
           for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             element = _ref[_i];
-            directive = directiveFunction.call(model, element, index);
-            if (!directive) continue;
-            if (typeof directive === 'string') {
+            directive = directiveFunction.call((typeof model === 'object' ? model : {
+              value: model
+            }), element, index);
+            if (!directive) {
+              continue;
+            }
+            if (typeof directive !== 'object') {
               directive = {
@@ -208,17 +226,15 @@ text: directive
             setHtml(element, directive.html);
-            _results2.push((function() {
-              var _base, _results3;
-              _results3 = [];
+            _results1.push((function() {
+              var _results2;
+              _results2 = [];
               for (attr in directive) {
                 value = directive[attr];
-                if (!(attr !== 'html' && attr !== 'text')) continue;
-                elementData = T.data(element);
-                elementData.attributes || (elementData.attributes = {});
-                (_base = elementData.attributes)[attr] || (_base[attr] = element.getAttribute(attr));
-                _results3.push(element.setAttribute(attr, value));
+                if (attr !== 'html' && attr !== 'text') {
+                  _results2.push(setAttribute(element, attr, value));
+                }
               }
-              return _results3;
+              return _results2;
             })());
           }
-          return _results2;
+          return _results1;
         })());
@@ -235,12 +251,12 @@ }
       value = model[key];
-      if (typeof value === 'object') {
+      if (typeof value === 'object' && !isDate(value)) {
         _results.push((function() {
-          var _i, _len, _ref, _results2;
+          var _i, _len, _ref, _results1;
           _ref = matchingElements(instance, key);
-          _results2 = [];
+          _results1 = [];
           for (_i = 0, _len = _ref.length; _i < _len; _i++) {
             element = _ref[_i];
-            _results2.push(T.render(element, value, directives[key]));
+            _results1.push(T.render(element, value, directives[key]));
           }
-          return _results2;
+          return _results1;
         })());
@@ -253,26 +269,30 @@ }
   setContent = function(callback) {
-    return function(e, content) {
-      var c, eData, n, _i, _len, _ref, _results;
-      eData = T.data(e);
-      if (!e || !(content != null) || eData.content === content) return;
-      eData.content = content;
-      eData.children || (eData.children = (function() {
+    return function(element, content) {
+      var c, elementData, n, _i, _len, _ref, _results;
+      elementData = T.data(element);
+      if (!element || !(content != null) || elementData.content === content) {
+        return;
+      }
+      elementData.content = content;
+      elementData.children || (elementData.children = (function() {
         var _i, _len, _ref, _results;
-        _ref = e.childNodes;
+        _ref = element.childNodes;
         _results = [];
         for (_i = 0, _len = _ref.length; _i < _len; _i++) {
           n = _ref[_i];
-          if (n.nodeType === ELEMENT_NODE) _results.push(n);
+          if (n.nodeType === ELEMENT_NODE) {
+            _results.push(n);
+          }
         }
         return _results;
       })());
-      while (e.firstChild) {
-        e.removeChild(e.firstChild);
+      while (element.firstChild) {
+        element.removeChild(element.firstChild);
       }
-      callback(e, content);
-      _ref = eData.children;
+      callback(element, content);
+      _ref = elementData.children;
       _results = [];
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         c = _ref[_i];
-        _results.push(e.appendChild(c));
+        _results.push(element.appendChild(c));
       }
@@ -283,23 +303,38 @@ return _results;
 
-  setHtml = setContent(function(e, html) {
-    return e.innerHTML = html;
+  setHtml = setContent(function(element, html) {
+    return element.innerHTML = html;
   });
 
-  setText = setContent(function(e, text) {
-    if (e.nodeName.toLowerCase() === 'input') {
-      return e.setAttribute('value', text);
+  setText = setContent(function(element, text) {
+    if (element.nodeName.toLowerCase() === 'input') {
+      return setAttribute(element, 'value', text);
     } else {
-      return e.appendChild(e.ownerDocument.createTextNode(text));
+      return element.appendChild(element.ownerDocument.createTextNode(text));
     }
   });
 
+  setAttribute = function(element, attr, value) {
+    var elementData, _base, _base1;
+    elementData = T.data(element);
+    elementData.attributes || (elementData.attributes = {});
+    if (attr === 'class') {
+      (_base = elementData.attributes)[attr] || (_base[attr] = element.className);
+      return element.className = value;
+    } else {
+      (_base1 = elementData.attributes)[attr] || (_base1[attr] = element.getAttribute(attr));
+      return element.setAttribute(attr, value);
+    }
+  };
+
   elementNodes = function(template) {
-    var child, e, elements, _i, _j, _len, _len2, _ref;
+    var child, e, elements, _i, _j, _len, _len1, _ref;
     elements = [];
     for (_i = 0, _len = template.length; _i < _len; _i++) {
       e = template[_i];
-      if (!(e.nodeType === ELEMENT_NODE)) continue;
+      if (!(e.nodeType === ELEMENT_NODE)) {
+        continue;
+      }
       elements.push(e);
       _ref = e.getElementsByTagName('*');
-      for (_j = 0, _len2 = _ref.length; _j < _len2; _j++) {
+      for (_j = 0, _len1 = _ref.length; _j < _len1; _j++) {
         child = _ref[_j];
@@ -320,7 +355,9 @@ elements.push(child);
         e = _ref[_i];
-        if (elementMatcher(e, key)) _results.push(e);
+        if (elementMatcher(e, key)) {
+          _results.push(e);
+        }
       }
       return _results;
     })());
-    debug("Matching elements for '" + key + "'", elements);
+    debug("Matching elements for '" + key + "':", elements);
     return elements;
@@ -335,29 +372,39 @@ };
 
-  cloneNode = document.createElement("nav").cloneNode(true).outerHTML !== "<:nav></:nav>" ? function(node) {
+  html5Clone = function() {
+    return document.createElement("nav").cloneNode(true).outerHTML !== "<:nav></:nav>";
+  };
+
+  cloneNode = !html5Clone() ? function(node) {
+    return jQuery(node).clone()[0];
+  } : function(node) {
     return node.cloneNode(true);
-  } : function(node) {
-    var div;
-    div = document.createElement("div");
-    div.innerHTML = node.outerHTML;
-    div.firstChild.removeAttribute(expando);
-    return div.firstChild;
   };
 
+  if (Array.isArray == null) {
+    Array.isArray = function(obj) {
+      return jQuery.isArray(obj);
+    };
+  }
+
   if ((_base = Array.prototype).indexOf == null) {
     _base.indexOf = function(obj) {
-      var i, index, x, _len;
-      index = -1;
-      for (i = 0, _len = this.length; i < _len; i++) {
-        x = this[i];
-        if (!(x === obj)) continue;
-        index = i;
-        break;
-      }
-      return index;
+      return jQuery.inArray(obj, this);
     };
   }
 
-  if (Array.isArray == null) {
-    Array.isArray = function(obj) {
-      return Object.prototype.toString.call(obj) === '[object Array]';
+  isDate = function(obj) {
+    return Object.prototype.toString.call(obj) === '[object Date]';
+  };
+
+  pad = function(n) {
+    if (n < 10) {
+      return "0" + n;
+    } else {
+      return n.toString();
+    }
+  };
+
+  if ((_base1 = Date.prototype).toISOString == null) {
+    _base1.toISOString = function() {
+      return ("" + (this.getUTCFullYear()) + "-" + (pad(this.getUTCMonth() + 1)) + "-" + (pad(this.getUTCDate()))) + ("T" + (pad(this.getUTCHours())) + ":" + (pad(this.getUTCMinutes())) + ":" + (pad(this.getUTCSeconds()))) + ("." + (String((this.getUTCMilliseconds() / 1000).toFixed(3)).slice(2, 5)) + "Z");
     };
@@ -364,0 +411,0 @@ }

lib/transparency.min.js

@@ -1,1 +0,2 @@
-((function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s=Array.prototype.slice;typeof jQuery!="undefined"&&jQuery!==null&&(jQuery.fn.render=function(a,c,d){var e,f,g;for(f=0,g=this.length;f<g;f++)e=this[f],b.render(e,a,c,d);return this}),this.Transparency=c={},typeof module!="undefined"&&module!==null&&(module.exports=c),b=c,i="transparency",b.data=function(a){return a[i]||(a[i]={})},e=null,f=function(a){return a&&typeof console!="undefined"&&console!==null?function(){var a,b,c,d,e;b=1<=arguments.length?s.call(arguments,0):[],e=[];for(c=0,d=b.length;c<d;c++)a=b[c],e.push(console.log(a));return e}:function(){}},b.render=function(a,c,d,g){var h,i,j,o,p,q,r,s,t,u,v;e=f(g!=null?g.debug:void 0),e("Context",a,"Models",c,"Directives",d,"Config",g);if(!a)return;c||(c=[]),d||(d={}),Array.isArray(c)||(c=[c]),r=a.nextSibling,q=a.parentNode,q!=null&&q.removeChild(a),k(a,c),h=b.data(a);for(j=0,t=c.length;j<t;j++){p=c[j],o=h.instances[j],e("Model",p,"Template instance",o),v=o.elements;for(s=0,u=v.length;s<u;s++)i=v[s],b.data(i).model=p;n(o,p),m(o,p,d,j),l(o,p,d)}return r?q!=null&&q.insertBefore(a,r):q!=null&&q.appendChild(a),a},k=function(c,f){var g,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w;i=b.data(c),i.template||(i.template=function(){var a;a=[];while(c.firstChild)a.push(c.removeChild(c.firstChild));return a}()),i.instanceCache||(i.instanceCache=[]),i.instances||(i.instances=[]),e("Template",i.template);while(f.length>i.instances.length){k=i.instanceCache.pop()||{},k.queryCache||(k.queryCache={}),k.template||(k.template=function(){var b,c,e,f;e=i.template,f=[];for(b=0,c=e.length;b<c;b++)l=e[b],l.nodeType===a&&f.push(d(l));return f}()),k.elements||(k.elements=h(k.template)),t=k.template;for(n=0,q=t.length;n<q;n++)l=t[n],c.appendChild(l);i.instances.push(k)}while(f.length<i.instances.length){i.instanceCache.push(k=i.instances.pop()),u=k.template;for(o=0,r=u.length;o<r;o++)l=u[o],l.parentNode.removeChild(l)}v=i.instances,w=[];for(p=0,s=v.length;p<s;p++)k=v[p],w.push(function(){var a,c,d,e;d=k.elements,e=[];for(a=0,c=d.length;a<c;a++)j=d[a],e.push(function(){var a,c;a=b.data(j).attributes,c=[];for(g in a)m=a[g],c.push(j.setAttribute(g,m));return c}());return e}());return w},n=function(a,b){var c,d,e,f;if(typeof b=="object"){f=[];for(d in b)e=b[d],typeof e!="object"&&typeof e!="function"&&f.push(function(){var b,f,g,h;g=j(a,d),h=[];for(b=0,f=g.length;b<f;b++)c=g[b],h.push(q(c,e));return h}());return f}c=j(a,"listElement")[0]||a.elements[0];if(c)return q(c,b)},m=function(a,c,d,e){var f,g,h,i,k,l,m,n;n=[];for(l in d)h=d[l],typeof h=="function"&&n.push(function(){var d,n,o,r;o=j(a,l),r=[];for(d=0,n=o.length;d<n;d++){i=o[d],g=h.call(c,i,e);if(!g)continue;typeof g=="string"&&(g={text:g}),q(i,g.text),p(i,g.html),r.push(function(){var a,c;c=[];for(f in g){m=g[f];if(f==="html"||f==="text")continue;k=b.data(i),k.attributes||(k.attributes={}),(a=k.attributes)[f]||(a[f]=i.getAttribute(f)),c.push(i.setAttribute(f,m))}return c}())}return r}());return n},l=function(a,c,d){var e,f,g,h;h=[];for(f in c)g=c[f],typeof g=="object"&&h.push(function(){var c,h,i,k;i=j(a,f),k=[];for(c=0,h=i.length;c<h;c++)e=i[c],k.push(b.render(e,g,d[f]));return k}());return h},o=function(c){return function(d,e){var f,g,h,i,j,k,l;g=b.data(d);if(!d||e==null||g.content===e)return;g.content=e,g.children||(g.children=function(){var b,c,e,f;e=d.childNodes,f=[];for(b=0,c=e.length;b<c;b++)h=e[b],h.nodeType===a&&f.push(h);return f}());while(d.firstChild)d.removeChild(d.firstChild);c(d,e),k=g.children,l=[];for(i=0,j=k.length;i<j;i++)f=k[i],l.push(d.appendChild(f));return l}},p=o(function(a,b){return a.innerHTML=b}),q=o(function(a,b){return a.nodeName.toLowerCase()==="input"?a.setAttribute("value",b):a.appendChild(a.ownerDocument.createTextNode(b))}),h=function(b){var c,d,e,f,g,h,i,j;e=[];for(f=0,h=b.length;f<h;f++){d=b[f];if(d.nodeType!==a)continue;e.push(d),j=d.getElementsByTagName("*");for(g=0,i=j.length;g<i;g++)c=j[g],e.push(c)}return e},j=function(a,b){var c,d,f;return d=(f=a.queryCache)[b]||(f[b]=function(){var d,e,f,h;f=a.elements,h=[];for(d=0,e=f.length;d<e;d++)c=f[d],g(c,b)&&h.push(c);return h}()),e("Matching elements for '"+b+"'",d),d},g=function(a,b){return a.id===b||a.className.split(" ").indexOf(b)>-1||a.name===b||a.getAttribute("data-bind")===b},a=1,d=document.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>"?function(a){return a.cloneNode(!0)}:function(a){var b;return b=document.createElement("div"),b.innerHTML=a.outerHTML,b.firstChild.removeAttribute(i),b.firstChild},(r=Array.prototype).indexOf==null&&(r.indexOf=function(a){var b,c,d,e;c=-1;for(b=0,e=this.length;b<e;b++){d=this[b];if(d!==a)continue;c=b;break}return c}),Array.isArray==null&&(Array.isArray=function(a){return Object.prototype.toString.call(a)==="[object Array]"})})).call(this);
+// Generated by CoffeeScript 1.3.1
+(function(){var a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x=[].slice;typeof jQuery!="undefined"&&jQuery!==null&&(jQuery.fn.render=function(a,c,d){var e,f,g;for(f=0,g=this.length;f<g;f++)e=this[f],b.render(e,a,c,d);return this}),this.Transparency=c={},typeof module!="undefined"&&module!==null&&(module.exports=c),b=c,i="transparency",b.data=function(a){return a[i]||(a[i]={})},e=null,f=function(a){return a&&typeof console!="undefined"&&console!==null?function(){var a,b,c,d,e;b=1<=arguments.length?x.call(arguments,0):[],e=[];for(c=0,d=b.length;c<d;c++)a=b[c],e.push(console.log(a));return e}:function(){}},b.render=function(a,c,d,g){var h,i,j,k,l,m,r,s,t,u,v,w;e=f(g!=null?g.debug:void 0),e("Context:",a,"Models:",c,"Directives:",d,"Config:",g);if(!a)return;c||(c=[]),d||(d={}),Array.isArray(c)||(c=[c]),r=a.nextSibling,m=a.parentNode,m!=null&&m.removeChild(a),n(a,c),h=b.data(a);for(j=s=0,u=c.length;s<u;j=++s){l=c[j],k=h.instances[j],e("Model:",l,"Template instance for the model:",k),w=k.elements;for(t=0,v=w.length;t<v;t++)i=w[t],b.data(i).model=l;q(k,l),p(k,l,d,j),o(k,l,d)}return r?m!=null&&m.insertBefore(a,r):m!=null&&m.appendChild(a),a},n=function(a,c){var f,g,i,j,k,l,m,n,o,p,q,s,t,u,v,w;g=b.data(a),g.template||(g.template=function(){var b;b=[];while(a.firstChild)b.push(a.removeChild(a.firstChild));return b}()),g.instanceCache||(g.instanceCache=[]),g.instances||(g.instances=[]),e("Original template",g.template);while(c.length>g.instances.length){j=g.instanceCache.pop()||{},j.queryCache||(j.queryCache={}),j.template||(j.template=function(){var a,b,c,e;c=g.template,e=[];for(a=0,b=c.length;a<b;a++)k=c[a],e.push(d(k));return e}()),j.elements||(j.elements=h(j.template)),t=j.template;for(m=0,p=t.length;m<p;m++)k=t[m],a.appendChild(k);g.instances.push(j)}while(c.length<g.instances.length){g.instanceCache.push(j=g.instances.pop()),u=j.template;for(n=0,q=u.length;n<q;n++)k=u[n],k.parentNode.removeChild(k)}v=g.instances,w=[];for(o=0,s=v.length;o<s;o++)j=v[o],w.push(function(){var a,c,d,e;d=j.elements,e=[];for(a=0,c=d.length;a<c;a++)i=d[a],e.push(function(){var a,c;a=b.data(i).attributes,c=[];for(f in a)l=a[f],c.push(r(i,f,l));return c}());return e}());return w},q=function(a,b){var c,d,e,f;f=[];for(d in b){e=b[d];if(typeof b!="object")continue;k(e)&&(e=e.toISOString()),typeof e!="object"&&typeof e!="function"?f.push(function(){var b,f,g,h;g=l(a,d),h=[];for(b=0,f=g.length;b<f;b++)c=g[b],h.push(u(c,e));return h}()):f.push(void 0)}return f},p=function(a,b,c,d){var e,f,g,h,i,j,k;k=[];for(i in c)g=c[i],typeof g=="function"&&k.push(function(){var c,k,m,n;m=l(a,i),n=[];for(c=0,k=m.length;c<k;c++){h=m[c],f=g.call(typeof b=="object"?b:{value:b},h,d);if(!f)continue;typeof f!="object"&&(f={text:f}),u(h,f.text),t(h,f.html),n.push(function(){var a;a=[];for(e in f)j=f[e],e!=="html"&&e!=="text"&&a.push(r(h,e,j));return a}())}return n}());return k},o=function(a,c,d){var e,f,g,h;h=[];for(f in c)g=c[f],typeof g=="object"&&!k(g)&&h.push(function(){var c,h,i,j;i=l(a,f),j=[];for(c=0,h=i.length;c<h;c++)e=i[c],j.push(b.render(e,g,d[f]));return j}());return h},s=function(c){return function(d,e){var f,g,h,i,j,k,l;g=b.data(d);if(!d||e==null||g.content===e)return;g.content=e,g.children||(g.children=function(){var b,c,e,f;e=d.childNodes,f=[];for(b=0,c=e.length;b<c;b++)h=e[b],h.nodeType===a&&f.push(h);return f}());while(d.firstChild)d.removeChild(d.firstChild);c(d,e),k=g.children,l=[];for(i=0,j=k.length;i<j;i++)f=k[i],l.push(d.appendChild(f));return l}},t=s(function(a,b){return a.innerHTML=b}),u=s(function(a,b){return a.nodeName.toLowerCase()==="input"?r(a,"value",b):a.appendChild(a.ownerDocument.createTextNode(b))}),r=function(a,c,d){var e,f,g;return e=b.data(a),e.attributes||(e.attributes={}),c==="class"?((f=e.attributes)[c]||(f[c]=a.className),a.className=d):((g=e.attributes)[c]||(g[c]=a.getAttribute(c)),a.setAttribute(c,d))},h=function(b){var c,d,e,f,g,h,i,j;e=[];for(f=0,h=b.length;f<h;f++){d=b[f];if(d.nodeType!==a)continue;e.push(d),j=d.getElementsByTagName("*");for(g=0,i=j.length;g<i;g++)c=j[g],e.push(c)}return e},l=function(a,b){var c,d,f;return d=(f=a.queryCache)[b]||(f[b]=function(){var d,e,f,h;f=a.elements,h=[];for(d=0,e=f.length;d<e;d++)c=f[d],g(c,b)&&h.push(c);return h}()),e("Matching elements for '"+b+"':",d),d},g=function(a,b){return a.id===b||a.className.split(" ").indexOf(b)>-1||a.name===b||a.getAttribute("data-bind")===b},a=1,j=function(){return document.createElement("nav").cloneNode(!0).outerHTML!=="<:nav></:nav>"},d=j()?function(a){return a.cloneNode(!0)}:function(a){return jQuery(a).clone()[0]},Array.isArray==null&&(Array.isArray=function(a){return jQuery.isArray(a)}),(v=Array.prototype).indexOf==null&&(v.indexOf=function(a){return jQuery.inArray(a,this)}),k=function(a){return Object.prototype.toString.call(a)==="[object Date]"},m=function(a){return a<10?"0"+a:a.toString()},(w=Date.prototype).toISOString==null&&(w.toISOString=function(){return""+this.getUTCFullYear()+"-"+m(this.getUTCMonth()+1)+"-"+m(this.getUTCDate())+("T"+m(this.getUTCHours())+":"+m(this.getUTCMinutes())+":"+m(this.getUTCSeconds()))+("."+String((this.getUTCMilliseconds()/1e3).toFixed(3)).slice(2,5)+"Z")})}).call(this);

package.json

 {
   "name"           : "transparency",
-  "version"        : "0.5.3",
+  "version"        : "0.5.5",
   "description"    : "Transparency is a minimal template engine for browsers. It maps JSON objects to DOM elements with zero configuration.",
@@ -5,0 +5,0 @@ "homepage"       : "https://github.com/leonidas/transparency",

README.md

@@ -26,2 +26,4 @@ # Synopsis
 
+[![Build Status](https://secure.travis-ci.org/leonidas/transparency.png?branch=master)](http://travis-ci.org/leonidas/transparency)
+
 ## Features
@@ -71,3 +73,3 @@
 
-### Assigning values
+### Binding values
 
@@ -116,3 +118,3 @@ Transparency binds JavaScript objects to DOM a element by `id`, `class`,`name` attribute and
 
-### Iterating over a list
+### Rendering a list of models
 
@@ -152,4 +154,12 @@ Template:
 
-#### Iterating over a list with plain values
+#### Rendering a list with plain values
 
+With plain values, Transparency can't guess how you would like to bind the data to DOM, so a bit of
+help is needed. Directive functions are just for that. Directives are defined as an object of functions.
+Keys are matched to dom elements and each model is passed for the functions as `this` parameter, one by one.
+
+Access to the plain values within the directive function is provided through `this.value`. There's a whole
+lot more to say about the directives, but that's all we need for now. For further examples, see
+section [Directives](https://github.com/leonidas/transparency#directives).
+
 Template:
@@ -160,3 +170,3 @@
   <div class="comments">
-    <span></span>
+    <label>Comments:</label><span class="comment"></span>
   </div>
@@ -169,38 +179,16 @@ </div>
 ```js
-var comments = ["That rules", "Great post!"]
+var comments, directives;
 
-$('.comments').render(comments);
-```
+comments = ["That rules", "Great post!"];
 
-Result:
+# See section 'Directives' for the details
+directives = {
+  comment: function() {
+    return this.value;
+  }
+};
 
-```html
-<div>
-  <div class="comments">
-    <span>That rules</span>
-    <span>Great post!</span>
-  </div>
-</div>
+$('.comments').render(comments, directives);
 ```
 
-#### Iterating over a list with plain values, using `listElement` class
-
-Template:
-
-```html
-<div>
-  <div class="comments">
-    <label>comment</label><span class="listElement"></span>
-  </div>
-</div>
-```
-
-Javascript:
-
-```js
-var comments = ["That rules", "Great post!"]
-
-$('.comments').render(comments);
-```
-
 Result:
@@ -211,4 +199,4 @@
   <div class="comments">
-    <label>comment</label><span class="listElement">That rules</span>
-    <label>comment</label><span class="listElement">Great post!</span>
+    <label>Comments</label><span class="comment">That rules</span>
+    <label>Comments</label><span class="comment">Great post!</span>
   </div>
@@ -215,0 +203,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

57

increased by3.64%

Worsened metrics

Total package byte prevSize

1162190

decreased by-0.05%

Lines of code

9354

decreased by-1.89%

Number of lines in readme file

468

decreased by-2.5%

No dependency changes