test-in-browser works! (minus events)

packages/test-in-browser/driver.html

@@ -88,7 +88,7 @@
   <div class="row-fluid"><div class="span12">
   <div class="test_table">
     {{#each testdata}}
-      {{> test_group ThisWithDep}}
+      {{> test_group thisWithDep}}
     {{/each}}
   </div>
   </div></div>
@@ -98,10 +98,10 @@
   <div class="group">
     <div class="groupname"><a>{{name}}</a></div>
     {{#each tests}}
-      {{> test ThisWithDep}}
+      {{> test thisWithDep}}
     {{/each}}
     {{#each groups}}
-      {{> test_group}}
+      {{> test_group thisWithDep}}
     {{/each}}
   </div>
 </template>

packages/test-in-browser/driver.js

@@ -344,12 +344,20 @@ Template.testTable.helpers({
   testdata: function () {
     topLevelGroupsDep.depend();
     return resultTree;
-  }
+  },
+  thisWithDep: function () {
+    this.dep.depend();
+    return this;
+  },
 });
 
 //// Template - test_group
 
-Template.test_group.helpers({
+Template.test_group.events({
+  thisWithDep: function () {
+    this.dep.depend();
+    return this;
+  },
   'click .groupname': function (evt) {
     changeToPath(this.path);
     // prevent enclosing groups from also triggering on
@@ -494,13 +502,3 @@ Template.event.helpers({
     return !!this.cookie;
   }
 });
-
-
-// XXX BAD
-// This is the only way we can currently write a helper
-// that gets the current data context inside an #each --
-// make it global.  D'oh.
-window.ThisWithDep = function () {
-  this.dep.depend();
-  return this;
-};

packages/test-in-browser/package.js

@@ -4,7 +4,6 @@ Package.describe({
 });
 
 Package.on_use(function (api) {
-
   // XXX this should go away, and there should be a clean interface
   // that tinytest and the driver both implement?
   api.use('tinytest');

packages/ui/base.js

@@ -115,7 +115,6 @@ _extend(UI.Component, {
   // pretty-print correctly.
   kind: "Component",
   guid: "1",
-  data: null,
   dom: null,
   // Has this Component ever been inited?
   isInited: false,

packages/ui/dombackend.js

@@ -29,7 +29,7 @@ if (Meteor.isClient) {
       // jQuery does fancy stuff like creating an appropriate
       // container element and setting innerHTML on it, as well
       // as working around various IE quirks.
-      return jQuery.parseHTML(html);
+      return jQuery.parseHTML(html) || [];
     },
     // `selector` is non-null.  `type` is one type (but
     // may be in backend-specific form, e.g. have namespaces).

packages/ui/fields.js

@@ -35,7 +35,7 @@ _extend(UI.Component, {
     } else if ((comp = findComponentWithProp(id, self))) {
       // found a method
       result = comp[id];
-      thisToBind = self;
+      thisToBind = getData(self);
     } else if (id === 'if') {
       result = UI.If;
     } else if (id === 'each') {

packages/ui/render.js

@@ -21,8 +21,16 @@ UI.renderToRange = function (kind, props, range, parentComp) {
 
   // XXX Handle case where kind is function reactively.
   // Reuse the same DomRange.
-  if ((typeof kind) === 'function')
-    kind = kind();
+  if ((typeof kind) === 'function') {
+    // XXX scope this autorun
+    Deps.autorun(function (c) {
+      if (c.firstRun) {
+        kind = kind();
+      } else {
+        debugger; // XXX
+      }
+    });
+  }
 
   if (kind === null)
     return null;
@@ -42,9 +50,15 @@ UI.renderToRange = function (kind, props, range, parentComp) {
     comp.init();
 
   if (comp.render) {
-    var buf = makeRenderBuffer();
-    comp.render(buf);
-    buf.build(comp);
+    // XXX scope this autorun
+    Deps.autorun(function (c) {
+      if (! c.firstRun) {
+        range.removeAll();
+      }
+      var buf = makeRenderBuffer();
+      comp.render(buf);
+      buf.build(comp);
+    });
   }
 
   // XXX think about this callback's semantics
@@ -212,20 +226,7 @@ makeRenderBuffer = function (options) {
     var start = range.startNode();
     var nextNode = start.nextSibling;
     // jQuery does fancy html-to-DOM compat stuff here:
-    $(start).after(html);
-    // now the DOM elements are physically inside the DomRange,
-    // but they haven't been added yet (so they aren't tracked
-    // and UI hooks haven't been called; they are foreign
-    // matter).
-    //
-    // XXX weirdly, as we add them to the range they are
-    // moved to the end, which works out fine unless an
-    // exception stops us in the middle, in which case
-    // it may look weird to the developer that the order is
-    // wrong.  Before fixing this (i.e. making it less weird,
-    // and maybe less costly), figure out if we should be
-    // rendering offscreen via performance testing.
-    var lastNode = nextNode.previousSibling;
+    var newNodes = UI.DomBackend.parseHTML(html);
 
     var wire = function (n) {
       // returns what ended up in the place of `n`:
@@ -293,16 +294,11 @@ makeRenderBuffer = function (options) {
     };
 
     // top level
-    for (var n = start.nextSibling, m;
-         n; n = (n === lastNode ? null : m)) {
-      m = n.nextSibling;
+    for (var i = 0; i < newNodes.length; i++) {
+      var n = newNodes[i];
       var result = wire(n);
       // `result` is DOM node, component, or null
       if (result) {
-        if (result.dom)
-          // XXX won't be necessary when DomRange takes
-          // components in:
-          result = result.dom;
         range.add(result);
         if (result.nodeType === 1 && result.firstChild)
           walk(result);