diff --git a/examples/other/template-demo/client/template-demo.html b/examples/other/template-demo/client/template-demo.html index 59a8068208..d1736b5871 100644 --- a/examples/other/template-demo/client/template-demo.html +++ b/examples/other/template-demo/client/template-demo.html @@ -107,22 +107,22 @@ X={{x}}

- You can get a create callback when a template is - initially rendered; a render when a template is placed on + You can get a created callback when a template is + initially rendered; a rendered when a template is placed on the screen and when any part of the template is redrawn; and - a destroy callback when a template is taken across the + a destroyed callback when a template is taken across the screen. All of these callbacks receive a common template state object in 'this' which allows you to attach data to each particular instance of a template.

- In this case, create is used to create a new JavaScript + In this case, created is used to create a new JavaScript timer that updates the text of a <span> element every - second. render is used to find the <span> when it + second. rendered is used to find the <span> when it appears on the screen, and update the pointer when the <span> is redraw (say, when you press Y++ — since it - is not marked to be preserved.) destroy is used to cancel + is not marked to be preserved.) destroyed is used to cancel the timer when the template goes off the screen.

@@ -156,7 +156,7 @@ X={{x}}

Meteor fits naturally with the popular d3.js data visualization library by Michael Bostock. Just set up d3 from your - template's render callback. With Meteor, you can pass + template's rendered callback. With Meteor, you can pass data directly out of a Mongo query into d3, and your d3 visualization will update in realtime, with no extra code! Try opening this page in two browser windows. diff --git a/examples/other/template-demo/client/template-demo.js b/examples/other/template-demo/client/template-demo.js index cbf00a00f7..e6480f7852 100644 --- a/examples/other/template-demo/client/template-demo.js +++ b/examples/other/template-demo/client/template-demo.js @@ -110,13 +110,13 @@ var updateTimer = function (timer) { ((timer.elapsed === 1) ? "" : "s"); }; -Template.timer.create = function () { +Template.timer.created = function () { var self = this; self.elapsed = 0; self.node = null; }; -Template.timer.render = function () { +Template.timer.rendered = function () { var self = this; self.node = this.find(".elapsed"); updateTimer(self); @@ -131,7 +131,7 @@ Template.timer.render = function () { } }; -Template.timer.destroy = function () { +Template.timer.destroyed = function () { clearInterval(this.timer); }; @@ -219,10 +219,10 @@ Template.circles.disabled = function () { '' : 'disabled="disabled"'; }; -Template.circles.create = function () { +Template.circles.created = function () { }; -Template.circles.render = function () { +Template.circles.rendered = function () { var self = this; self.node = self.find("svg"); @@ -291,6 +291,6 @@ Template.circles.render = function () { } }; -Template.circles.destroy = function () { +Template.circles.destroyed = function () { this.handle && this.handle.stop(); }; diff --git a/packages/spark/spark.js b/packages/spark/spark.js index 24618052be..52c28be6ba 100644 --- a/packages/spark/spark.js +++ b/packages/spark/spark.js @@ -20,7 +20,7 @@ // list() returns the expected HTML, Spark.createLandmark creates and // then destroys a landmark -- may already be tested?) -// XXX in landmark-demo, if Template.timer.create throws an exception, +// XXX in landmark-demo, if Template.timer.created throws an exception, // then it is never called again, even if you push the 'create a // timer' button again. the problem is almost certainly in atFlushTime // (not hard to see what it is.) @@ -342,7 +342,7 @@ var scheduleOnscreenSetup = function (frag, landmarkRanges) { // onscreen (possibly not for the first time.) _.each(landmarkRanges, function (landmarkRange) { if (! landmarkRange.isPreservedConstant) - landmarkRange.renderCallback.call(landmarkRange.landmark); + landmarkRange.rendered.call(landmarkRange.landmark); }); // Deliver render callbacks to all landmarks that enclose the @@ -356,7 +356,7 @@ var scheduleOnscreenSetup = function (frag, landmarkRanges) { // case from the previous var walk = renderedRange; while ((walk = findParentOfType(Spark._ANNOTATION_LANDMARK, walk))) - walk.renderCallback.call(walk.landmark); + walk.rendered.call(walk.landmark); // This code can run several times on the same nodes (if the // output of a render is included in a render), so it must be @@ -891,7 +891,7 @@ Spark.list = function (cursor, itemFunc, elseFunc) { var notifyParentsRendered = function () { var walk = outerRange; while ((walk = findParentOfType(Spark._ANNOTATION_LANDMARK, walk))) - walk.renderCallback.call(walk.landmark); + walk.rendered.call(walk.landmark); }; // The DOM update callbacks. @@ -1036,9 +1036,9 @@ Spark.createLandmark = function (options, htmlFunc) { if (! renderer) { // no renderer -- create and destroy Landmark inline var landmark = new Spark.Landmark; - options.create && options.create.call(landmark); + options.created && options.created.call(landmark); var html = htmlFunc(landmark); - options.destroy && options.destroy.call(landmark); + options.destroyed && options.destroyed.call(landmark); return html; } @@ -1060,11 +1060,11 @@ Spark.createLandmark = function (options, htmlFunc) { if (notes.originalRange) { if (notes.originalRange.superceded) throw new Error("Can't create second landmark in same branch"); - notes.originalRange.superceded = true; // prevent destroy(), second match + notes.originalRange.superceded = true; // prevent destroyed(), second match landmark = notes.originalRange.landmark; // the old Landmark } else { landmark = new Spark.Landmark; - options.create && options.create.call(landmark); + options.created && options.created.call(landmark); } notes.landmark = landmark; @@ -1074,13 +1074,13 @@ Spark.createLandmark = function (options, htmlFunc) { _.extend(range, { preserve: preserve, constant: !! options.constant, - renderCallback: options.render || function () {}, - destroyCallback: options.destroy || function () {}, + rendered: options.rendered || function () {}, + destroyed: options.destroyed || function () {}, landmark: landmark, finalize: function () { if (! this.superceded) { this.landmark._range = null; - this.destroyCallback.call(this.landmark); + this.destroyed.call(this.landmark); } } }); @@ -1089,7 +1089,7 @@ Spark.createLandmark = function (options, htmlFunc) { renderer.landmarkRanges.push(range); }, function () { // "annotation not used" callback - options.destroy && options.destroy.call(landmark); + options.destroyed && options.destroyed.call(landmark); }); }; diff --git a/packages/spark/spark_tests.js b/packages/spark/spark_tests.js index b5a89ee59a..f217a3c039 100644 --- a/packages/spark/spark_tests.js +++ b/packages/spark/spark_tests.js @@ -1,6 +1,6 @@ // XXX make sure that when tests use id="..." to trigger patching, "preserve" happens // XXX test that events inside constant regions still work after patching -// XXX test arguments to landmark render callback +// XXX test arguments to landmark rendered callback // XXX test variable wrapping (eg TR vs THEAD) inside each branch of Spark.list? @@ -1116,14 +1116,14 @@ Tinytest.add("spark - basic landmarks", function (test) { return Spark.isolate(function () { return R.get() + Spark.createLandmark({ - create: function () { + created: function () { x.push("c"); this.a = X; }, - render: function () { + rendered: function () { x.push("r", this.a); }, - destroy: function () { + destroyed: function () { x.push("d", this.a); } }, function() { return "hi"; }); @@ -1178,17 +1178,17 @@ Tinytest.add("spark - labeled landmarks", function (test) { var thisSerial = serial++; return Spark.createLandmark({ - create: function () { + created: function () { x.push("c", id); s.push(thisSerial); this.id = id; }, - render: function () { + rendered: function () { x.push("r", id); s.push(thisSerial); test.equal(this.id, id); }, - destroy: function () { + destroyed: function () { x.push("d", id); s.push(thisSerial); test.equal(this.id, id); @@ -1636,7 +1636,7 @@ Tinytest.add("spark - landmark constant", function(test) { R.get(); // create dependency return Spark.createLandmark({ constant: true, - render: function() { + rendered: function() { states.push(this); } }, function() { return ''; }); @@ -1681,14 +1681,14 @@ Tinytest.add("spark - landmark constant", function(test) { return Spark.createLandmark( { constant: isConstant, - create: function () { + created: function () { this.crd = [0,0,0]; if (! crd) crd = this.crd; // capture first landmark's crd this.crd[0]++; }, - render: function () { this.crd[1]++; }, - destroy: function () { this.crd[2]++; } + rendered: function () { this.crd[1]++; }, + destroyed: function () { this.crd[2]++; } }, function() { return hasSpan ? 'stuff' : 'blah'; });}) + @@ -1760,7 +1760,7 @@ Tinytest.add("spark - landmark constant", function(test) { }); }); - // test that constant landmark gets render callback if it + // test that constant landmark gets rendered callback if it // wasn't preserved. var renderCount; @@ -1769,7 +1769,7 @@ Tinytest.add("spark - landmark constant", function(test) { R = ReactiveVar('div'); div = OnscreenDiv(Meteor.render(function () { return '<' + R.get() + '>' + Spark.createLandmark( - {constant: true, render: function () { renderCount++; }}, + {constant: true, rendered: function () { renderCount++; }}, function () { return "hi"; }) + @@ -2725,7 +2725,7 @@ Tinytest.add("spark - oldschool landmark matching", function(test) { var testCallbacks = function(theNum /*, extend opts*/) { return _.extend.apply(_, [{ - create: function() { + created: function() { this.num = String(theNum); var howManyBefore = counts[this.num] || 0; counts[this.num] = howManyBefore + 1; @@ -2733,10 +2733,10 @@ Tinytest.add("spark - oldschool landmark matching", function(test) { this.num += "*"; // add stars buf.push("c"+this.num); }, - render: function(start, end, range) { + rendered: function(start, end, range) { buf.push("r"+this.num); }, - destroy: function() { + destroyed: function() { buf.push("d"+this.num); } }].concat(_.toArray(arguments).slice(1))); @@ -2814,7 +2814,7 @@ Tinytest.add("spark - oldschool branch keys", function(test) { R = ReactiveVar("foo"); div = OnscreenDiv(Meteor.render(function() { return Spark.createLandmark({ - render: function () { objs.push(true); } + rendered: function () { objs.push(true); } }, function () { return R.get(); }); })); @@ -2838,7 +2838,7 @@ Tinytest.add("spark - oldschool branch keys", function(test) { var testCallbacks = function(theNum /*, extend opts*/) { return _.extend.apply(_, [{ - create: function() { + created: function() { this.num = String(theNum); var howManyBefore = counts[this.num] || 0; counts[this.num] = howManyBefore + 1; @@ -2846,10 +2846,10 @@ Tinytest.add("spark - oldschool branch keys", function(test) { this.num += "*"; // add stars buf.push("c"+this.num); }, - render: function(start, end, range) { + rendered: function(start, end, range) { buf.push("on"+this.num); }, - destroy: function() { + destroyed: function() { buf.push("off"+this.num); } }].concat(_.toArray(arguments).slice(1))); @@ -3020,9 +3020,9 @@ Tinytest.add("spark - nested onscreen processing", function (test) { return Spark.list(cursor, function () {}, function () { return Spark.list(cursor, function () {}, function () { return Spark.createLandmark({ - create: function () { x.push('c'); }, - render: function () { x.push('r'); }, - destroy: function () { x.push('d'); } + created: function () { x.push('c'); }, + rendered: function () { x.push('r'); }, + destroyed: function () { x.push('d'); } }, function () { return "hi"; }); }); }); @@ -3042,13 +3042,13 @@ Tinytest.add("spark - current landmark", function (test) { var callbacks = 0; var d = OnscreenDiv(Meteor.render(function () { var html = Spark.createLandmark({ - create: function () { + created: function () { this.a = 1; this.renderCount = 0; test.isFalse('b' in this); callbacks++; }, - render: function () { + rendered: function () { test.equal(this.a, 9); test.equal(this.b, 2); if (this.renderCount === 0) @@ -3058,7 +3058,7 @@ Tinytest.add("spark - current landmark", function (test) { this.renderCount++; callbacks++; }, - destroy: function () { + destroyed: function () { test.equal(this.a, 9); test.equal(this.b, 2); test.equal(this.c, 3); @@ -3092,10 +3092,10 @@ Tinytest.add("spark - current landmark", function (test) { if (R.get() >= 3) { html += Spark.labelBranch('branch', function () { var html = Spark.createLandmark({ - create: function () { + created: function () { this.outer = true; }, - render: function () { + rendered: function () { this.renderCount = (this.renderCount || 0) + 1; } }, function (lm) { @@ -3104,10 +3104,10 @@ Tinytest.add("spark - current landmark", function (test) { test.equal(R.get() - 3, lm.renderCount || 0); html += Spark.labelBranch("a", function () { var html = Spark.createLandmark({ - create: function () { + created: function () { this.innerA = true; }, - render: function () { + rendered: function () { this.renderCount = (this.renderCount || 0) + 1; } }, function (lm) { @@ -3123,10 +3123,10 @@ Tinytest.add("spark - current landmark", function (test) { if (R.get() === 3 || R.get() >= 5) { html += Spark.labelBranch("b", function () { var html = Spark.createLandmark({ - create: function () { + created: function () { this.innerB = true; }, - render: function () { + rendered: function () { this.renderCount = (this.renderCount || 0) + 1; } }, function (lm) { @@ -3220,7 +3220,7 @@ Tinytest.add("spark - find/findAll on landmark", function (test) { return "

k
" + Spark.labelBranch("a", function () { return Spark.createLandmark({ - create: function () { + created: function () { test.instanceOf(this, Spark.Landmark); if (l1) test.equal(l1, this); @@ -3234,7 +3234,7 @@ Tinytest.add("spark - find/findAll on landmark", function (test) { R.get(); return Spark.createLandmark( { - create: function () { + created: function () { test.instanceOf(this, Spark.Landmark); if (l2) test.equal(l2, this); @@ -3292,9 +3292,9 @@ Tinytest.add("spark - landmark clean-up", function (test) { var makeCrd = function () { var crd = [0,0,0]; crd.callbacks = { - create: function () { crd[0]++; }, - render: function () { crd[1]++; }, - destroy: function () { crd[2]++; } + created: function () { crd[0]++; }, + rendered: function () { crd[1]++; }, + destroyed: function () { crd[2]++; } }; return crd; }; @@ -3345,9 +3345,9 @@ Tinytest.add("spark - bubbling render", function (test) { var makeCrd = function () { var crd = [0,0,0]; crd.callbacks = { - create: function () { crd[0]++; }, - render: function () { crd[1]++; }, - destroy: function () { crd[2]++; } + created: function () { crd[0]++; }, + rendered: function () { crd[1]++; }, + destroyed: function () { crd[2]++; } }; return crd; }; @@ -3388,10 +3388,10 @@ Tinytest.add("spark - bubbling render", function (test) { Tinytest.add("spark - landmark arg", function (test) { var div = OnscreenDiv(Spark.render(function () { return Spark.createLandmark({ - create: function () { + created: function () { test.isFalse(this.hasDom()); }, - render: function () { + rendered: function () { var landmark = this; landmark.firstNode().innerHTML = 'Greetings'; landmark.lastNode().innerHTML = 'Line'; @@ -3399,7 +3399,7 @@ Tinytest.add("spark - landmark arg", function (test) { (landmark.findAll('b').length)+"-bold"; test.isTrue(landmark.hasDom()); }, - destroy: function () { + destroyed: function () { test.isFalse(this.hasDom()); } }, function () { @@ -3503,9 +3503,9 @@ Tinytest.add("spark - unique label", function (test) { var ublm = function () { return Spark.labelBranch(Spark.UNIQUE_LABEL, function () { - return Spark.createLandmark({create: function () { buf.push('c'); }, - render: function () { buf.push('r'); }, - destroy: function () { buf.push('d'); }}, + return Spark.createLandmark({created: function () { buf.push('c'); }, + rendered: function () { buf.push('r'); }, + destroyed: function () { buf.push('d'); }}, function () { return 'x'; }); }); }; diff --git a/packages/templating/deftemplate.js b/packages/templating/deftemplate.js index b032f2ce48..53d673f8d2 100644 --- a/packages/templating/deftemplate.js +++ b/packages/templating/deftemplate.js @@ -46,7 +46,7 @@ }; // map from landmark id, to the 'this' object for - // create/render/destroy callbacks on templates + // created/rendered/destroyed callbacks on templates var templateInstanceData = {}; var templateObjFromLandmark = function (landmark) { @@ -112,20 +112,20 @@ var html = Spark.createLandmark({ preserve: tmplData.preserve || {}, - create: function () { + created: function () { var template = templateObjFromLandmark(this); template.data = data; - tmpl.create && tmpl.create.call(template); + tmpl.created && tmpl.created.call(template); }, - render: function () { + rendered: function () { var template = templateObjFromLandmark(this); template.data = data; - tmpl.render && tmpl.render.call(template); + tmpl.rendered && tmpl.rendered.call(template); }, - destroy: function () { + destroyed: function () { // template.data is already set from previous callbacks - tmpl.destroy && - tmpl.destroy.call(templateObjFromLandmark(this)); + tmpl.destroyed && + tmpl.destroyed.call(templateObjFromLandmark(this)); delete templateInstanceData[this.id]; } }, function (landmark) { diff --git a/packages/templating/templating_tests.js b/packages/templating/templating_tests.js index 08fbb1d212..0b537f1ccf 100644 --- a/packages/templating/templating_tests.js +++ b/packages/templating/templating_tests.js @@ -458,7 +458,7 @@ Tinytest.add("templating - branch labels", function(test) { var data = this; var firstRender = true; return Spark.createLandmark({ constant: true, - render: function () { + rendered: function () { if (! firstRender) return; firstRender = false; @@ -502,14 +502,14 @@ Tinytest.add("templating - matching in list", function (test) { var buf = []; _.extend(Template.test_listmatching_a1, { - create: function () { buf.push('+'); }, - render: function () { + created: function () { buf.push('+'); }, + rendered: function () { var letter = canonicalizeHtml( DomUtils.rangeToHtml(this.firstNode, this.lastNode).match(/\S+/)[0]); buf.push('*'+letter); }, - destroy: function () { buf.push('-'); } + destroyed: function () { buf.push('-'); } }); var R = ReactiveVar('foo'); @@ -583,7 +583,7 @@ Tinytest.add("templating - template arg", function (test) { } }; - Template.test_template_arg_a.create = function() { + Template.test_template_arg_a.created = function() { var self = this; test.isFalse(self.firstNode); test.isFalse(self.lastNode); @@ -591,7 +591,7 @@ Tinytest.add("templating - template arg", function (test) { test.throws(function () { return self.findAll("*"); }); }; - Template.test_template_arg_a.render = function () { + Template.test_template_arg_a.rendered = function () { var template = this; template.firstNode.innerHTML = 'Greetings'; template.lastNode.innerHTML = 'Line'; @@ -600,7 +600,7 @@ Tinytest.add("templating - template arg", function (test) { template.secret = "strawberry "+template.data.food; }; - Template.test_template_arg_a.destroy = function() { + Template.test_template_arg_a.destroyed = function() { var self = this; test.isFalse(self.firstNode); test.isFalse(self.lastNode); @@ -749,8 +749,8 @@ Tinytest.add("templating - events", function (test) { }); -Tinytest.add("templating - #each render callback", function (test) { - // test that any list modification triggers a render callback on the +Tinytest.add("templating - #each rendered callback", function (test) { + // test that any list modification triggers a rendered callback on the // enclosing template var entries = new LocalCollection(); @@ -763,7 +763,7 @@ Tinytest.add("templating - #each render callback", function (test) { var tmpl = Template.test_template_eachrender_a; tmpl.helpers({entries: function() { return entries.find({}, {sort: ['x']}); }}); - tmpl.render = function () { + tmpl.rendered = function () { buf.push(canonicalizeHtml( DomUtils.rangeToHtml(this.firstNode, this.lastNode)).replace(/\s/g, '')); }; @@ -815,7 +815,7 @@ Tinytest.add("templating - #each render callback", function (test) { }; }}; }}); - tmpl.render = function () { + tmpl.rendered = function () { buf.push(canonicalizeHtml( DomUtils.rangeToHtml(this.firstNode, this.lastNode)).replace(/\s/g, '')); }; @@ -848,9 +848,9 @@ Tinytest.add("templating - landmarks in helpers", function (test) { var tmpl = Template.test_template_landmarks_a; tmpl.LM = function () { return new Handlebars.SafeString( - Spark.createLandmark({create: function () { buf.push('c'); }, - render: function () { buf.push('r'); }, - destroy: function () { buf.push('d'); }}, + Spark.createLandmark({created: function () { buf.push('c'); }, + rendered: function () { buf.push('r'); }, + destroyed: function () { buf.push('d'); }}, function () { return 'x'; })); }; tmpl.v = function () { @@ -884,9 +884,9 @@ Tinytest.add("templating - bare each has no matching", function (test) { tmpl.abc = [{}, {}, {}]; tmpl.LM = function () { return new Handlebars.SafeString( - Spark.createLandmark({create: function () { buf.push('c'); }, - render: function () { buf.push('r'); }, - destroy: function () { buf.push('d'); }}, + Spark.createLandmark({created: function () { buf.push('c'); }, + rendered: function () { buf.push('r'); }, + destroyed: function () { buf.push('d'); }}, function () { return 'x'; })); }; tmpl.v = function () {