template render takes template obj; tests

Author: dgreensp

packages/spark/patch_tests.js

@@ -1,4 +1,4 @@
-Tinytest.add("spark - patcher - basic", function(test) {
+Tinytest.add("spark - patch - basic", function(test) {
 
   var Patcher = Spark._Patcher;
 
@@ -120,7 +120,7 @@ Tinytest.add("spark - patcher - basic", function(test) {
   _.each([["aaa","zzz"], ["",""], ["aaa",""], ["","zzz"]], rangeTest);
 });
 
-Tinytest.add("spark - patcher - copyAttributes", function(test) {
+Tinytest.add("spark - patch - copyAttributes", function(test) {
 
   var attrTester = function(tagName, initial) {
     var node;

packages/spark/spark.js

@@ -29,11 +29,6 @@
 // timer' button again. the problem is almost certainly in atFlushTime
 // (not hard to see what it is.)
 
-// XXX align the arguments to the render() callback with the arguments
-// to events (instead of landmark, pass the 'template' object again?
-// that suggess that david is right and startNode() should be a
-// function.)
-
 (function() {
 
 Spark = {};

packages/spark/spark_tests.js

@@ -262,6 +262,8 @@ Tinytest.add("spark - basic isolate", function (test) {
   Meteor.flush();
   test.equal(div.html(), '<div><span>baz</span></div>');
 
+  div.kill();
+  Meteor.flush();
 });
 
 Tinytest.add("spark - one render", function (test) {
@@ -1300,6 +1302,9 @@ Tinytest.add("spark - labeled landmarks", function (test) {
   excludeLandmarks[5].set(false);
   Meteor.flush();
   expect(["c", 5, "r", 5, "r", 4, "r", 3], [108, 108, 107, 105]);
+
+  div.kill();
+  Meteor.flush();
 });
 
 
@@ -1778,6 +1783,8 @@ Tinytest.add("spark - landmark constant", function(test) {
   // can patch here, renderCount stays the same
   test.equal(renderCount, 2);
 
+  div.kill();
+  Meteor.flush();
 });
 
 
@@ -2928,6 +2935,8 @@ Tinytest.add("spark - isolate inside landmark", function (test) {
   var foo2 = d.node().firstChild;
   test.equal(d.node().lastChild.nodeValue, '2');
   test.isTrue(foo1 === foo2);
+  d.kill();
+  Meteor.flush();
 
   // test that selectors in a landmark preservation map are resolved
   // relative to the landmark, not relative to the re-rendered
@@ -2952,7 +2961,8 @@ Tinytest.add("spark - isolate inside landmark", function (test) {
   var foo2 = DomUtils.find(d.node(), '.foo');
   test.equal(foo2.nextSibling.nodeValue, '2');
   test.isTrue(foo1 === foo2);
-
+  d.kill();
+  Meteor.flush();
 });
 
 Tinytest.add("spark - nested onscreen processing", function (test) {
@@ -3227,6 +3237,9 @@ Tinytest.add("spark - find/findAll on landmark", function (test) {
   Meteor.flush();
   check(false);
   check(true);
+
+  d.kill();
+  Meteor.flush();
 });
 
 Tinytest.add("spark - landmark clean-up", function (test) {
@@ -3327,3 +3340,35 @@ Tinytest.add("spark - bubbling render", function (test) {
 });
 
 })();
+
+Tinytest.add("spark - landmark arg", function (test) {
+  var div = OnscreenDiv(Spark.render(function () {
+    return Spark.createLandmark({
+      render: function () {
+        var landmark = this;
+        landmark.firstNode().innerHTML = 'Greetings';
+        landmark.lastNode().innerHTML = 'Line';
+        landmark.find('i').innerHTML =
+          (landmark.findAll('b').length)+"-bold";
+      }
+    }, function () {
+      return Spark.attachEvents({
+        'click': function (event, landmark) {
+          landmark.firstNode().innerHTML = 'Hello';
+          landmark.lastNode().innerHTML = 'World';
+          landmark.find('i').innerHTML =
+            (landmark.findAll('*').length)+"-element";
+        }
+      }, '<b>Foo</b> <i>Bar</i> <u>Baz</u>');
+    });
+  }));
+
+  test.equal(div.text(), "Foo Bar Baz");
+  Meteor.flush();
+  test.equal(div.text(), "Greetings 1-bold Line");
+  clickElement(DomUtils.find(div.node(), 'i'));
+  test.equal(div.text(), "Hello 3-element World");
+
+  div.kill();
+  Meteor.flush();
+});

packages/templating/deftemplate.js

@@ -45,6 +45,21 @@
   // create/render/destroy callbacks on templates
   var templateInstanceData = {};
 
+  var templateObjFromLandmark = function (landmark) {
+    var template = {
+      find: function (selector) {
+        return landmark.find(selector);
+      },
+      findAll: function (selector) {
+        return landmark.findAll(selector);
+      },
+      firstNode: landmark.firstNode(),
+      lastNode: landmark.lastNode(),
+      data: templateInstanceData[landmark.id]
+    };
+    return template;
+  };
+
   Meteor._def_template = function (name, raw_func) {
     Meteor._hook_handlebars();
 
@@ -64,7 +79,8 @@
         },
         render: function () {
           tmpl.render &&
-            tmpl.render.call(templateInstanceData[this.id], this);
+            tmpl.render.call(templateInstanceData[this.id],
+                             templateObjFromLandmark(this));
         },
         destroy: function () {
           tmpl.destroy &&
@@ -89,18 +105,8 @@
           var newEventMap = {};
           _.each(oldEventMap, function (handler, key) {
             newEventMap[key] = function (event, landmark) {
-              var template = {
-                find: function (selector) {
-                  return landmark.find(selector);
-                },
-                findAll: function (selector) {
-                  return landmark.findAll(selector);
-                },
-                firstNode: landmark.firstNode(),
-                lastNode: landmark.lastNode(),
-                data: templateInstanceData[landmark.id]
-              };
-              return handler.call(this, event, template);
+              return handler.call(this, event,
+                                  templateObjFromLandmark(landmark));
             };
           });
           return newEventMap;

packages/templating/templating_tests.html

@@ -230,3 +230,7 @@
     {{/isolate}}
   {{/isolate}}
 </template>
+
+<template name="test_template_arg_a">
+  <b>Foo</b> <i>Bar</i> <u>Baz</u>
+</template>

packages/templating/templating_tests.js

@@ -502,9 +502,9 @@ Tinytest.add("templating - matching in list", function (test) {
   var buf = [];
   _.extend(Template.test_listmatching_a1, {
     create: function () { buf.push('+'); },
-    render: function (landmark) {
-      var letter = DomUtils.rangeToHtml(landmark.firstNode(),
-                                        landmark.lastNode()).match(/\S+/)[0];
+    render: function (template) {
+      var letter = DomUtils.rangeToHtml(template.firstNode,
+                                        template.lastNode).match(/\S+/)[0];
       buf.push('*'+letter);
     },
     destroy: function () { buf.push('-'); }
@@ -567,4 +567,36 @@ Tinytest.add("templating - isolate helper", function (test) {
   div.kill();
   Meteor.flush();
 
-});
+});
+
+Tinytest.add("templating - template arg", function (test) {
+  Template.test_template_arg_a.events = {
+    click: function (event, template) {
+      template.firstNode.innerHTML = 'Hello';
+      template.lastNode.innerHTML = 'World';
+      template.find('i').innerHTML =
+        (template.findAll('*').length)+"-element";
+      template.lastNode.innerHTML += ' (the secret is '+
+        template.data.secret+')';
+    }
+  };
+
+  Template.test_template_arg_a.render = function (template) {
+    template.firstNode.innerHTML = 'Greetings';
+    template.lastNode.innerHTML = 'Line';
+    template.find('i').innerHTML =
+      (template.findAll('b').length)+"-bold";
+    template.data.secret = "strawberry pie";
+  };
+
+  var div = OnscreenDiv(Spark.render(Template.test_template_arg_a));
+
+  test.equal(div.text(), "Foo Bar Baz");
+  Meteor.flush();
+  test.equal(div.text(), "Greetings 1-bold Line");
+  clickElement(DomUtils.find(div.node(), 'i'));
+  test.equal(div.text(), "Hello 3-element World (the secret is strawberry pie)");
+
+  div.kill();
+  Meteor.flush();
+});