github/meteor
1
1
Fork 0
mirror of https://github.com/meteor/meteor.git synced 2026-05-02 03:01:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

past-tense created/rendered/destroyed

Browse Source 
Consensus is that "render" is too confusing a name for what's obviously a callback (after the template is rendered).  We prefer past tense rather than oncreate, onrender, ondestroy.
This commit is contained in:
David Greenspan
2012-08-22 16:53:14 -07:00
parent c149a10735
commit 9fe768989f
6 changed files with 96 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
examples/other/template-demo/client/template-demo.html
View File

@@ -107,22 +107,22 @@ X={{x}}<br>
</p>
<p>
You can get a <em>create</em> callback when a template is
initially rendered; a <em>render</em> when a template is placed on
You can get a <em>created</em> callback when a template is
initially rendered; a <em>rendered</em> when a template is placed on
the screen and when any part of the template is redrawn; and
a <em>destroy</em> callback when a template is taken across the
a <em>destroyed</em> callback when a template is taken across the
screen. All of these callbacks receive a common <em>template state
object</em> in 'this' which allows you to attach data to each
particular instance of a template.
</p>
<p>
In this case, <em>create</em> is used to create a new JavaScript
In this case, <em>created</em> is used to create a new JavaScript
timer that updates the text of a &lt;span&gt; element every
second. <em>render</em> is used to find the &lt;span&gt; when it
second. <em>rendered</em> is used to find the &lt;span&gt; when it
appears on the screen, and update the pointer when the
&lt;span&gt; is redraw (say, when you press Y++ &mdash; since it
is not marked to be preserved.) <em>destroy</em> is used to cancel
is not marked to be preserved.) <em>destroyed</em> is used to cancel
the timer when the template goes off the screen.
</p>
@@ -156,7 +156,7 @@ X={{x}}<br>
<p>
Meteor fits naturally with the popular d3.js data visualization
library by Michael Bostock. Just set up d3 from your
template's <em>render</em> callback. With Meteor, you can pass
template's <em>rendered</em> 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.

12
examples/other/template-demo/client/template-demo.js
View File

@@ -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();
};

24
packages/spark/spark.js
View File

@@ -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);
});
};

92
packages/spark/spark_tests.js
View File

@@ -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 '<b/><i/><u/>'; });
@@ -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 ?
'<span>stuff</span>' : '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 "<div id=1>k</div><div id=2>" +
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'; });
});
};

16
packages/templating/deftemplate.js
View File

@@ -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) {

34
packages/templating/templating_tests.js
View File

@@ -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 () {