component.getArg

examples/unfinished/shark/.meteor/packages

@@ -7,3 +7,5 @@ autopublish
 insecure
 preserve-inputs
 ui
+html5-tokenizer
+spacebars

examples/unfinished/shark/client/shark.js

@@ -34,7 +34,7 @@ DebugComponent = Component.extend({
 LI = DebugComponent.extend({
   build: function (frag) {
     var li = document.createElement('LI');
-    li.appendChild(document.createTextNode(this.args.text));
+    li.appendChild(document.createTextNode(this.getArg('text')));
     frag.appendChild(li);
     this.setBounds(li);
     this.textNode = li.firstChild;
@@ -44,7 +44,7 @@ LI = DebugComponent.extend({
       this.textNode.nodeValue = args.text;
   },
   toHtml: function () {
-    return "<li>" + escapeForHtml(this.args.text) + "</li>";
+    return "<li>" + escapeForHtml(this.getArg('text')) + "</li>";
   }
 });
 
@@ -132,7 +132,7 @@ Each = DebugComponent.extend({
   items: new OrderedDict(idStringify),
   init: function () {
     var self = this;
-    var cursor = self.args.list; // XXX support arrays too
+    var cursor = self.getArg('list'); // XXX support arrays too
     var items = self.items;
 
     // Templates should have access to data and methods added by the
@@ -230,7 +230,7 @@ Each = DebugComponent.extend({
   },
 
   itemAddedBefore: function (id, doc, beforeId) {
-    var bodyClass = this.args.bodyClass;
+    var bodyClass = this.getArg('bodyClass');
     var comp = new bodyClass({data: doc});
     this.addItemChild(id, comp);
 
@@ -245,8 +245,8 @@ Each = DebugComponent.extend({
   itemRemoved: function (id) {
     if (this.items.size() === 1) {
       // making empty
-      var elseClass = this.args.elseClass || EmptyComponent;
-      var comp = new elseClass({data: this.args.data});
+      var elseClass = this.getArg('elseClass') || EmptyComponent;
+      var comp = new elseClass({data: this.getArg('data')});
       this.addChild('else', comp);
 
       if (this.isBuilt) {
@@ -270,8 +270,8 @@ Each = DebugComponent.extend({
     this.getItemChild(id).update({data: doc});
   },
   initiallyEmpty: function () {
-    var elseClass = this.args.elseClass || EmptyComponent;
-    this.addChild('else', new elseClass({data: this.args.data}));
+    var elseClass = this.getArg('elseClass') || EmptyComponent;
+    this.addChild('else', new elseClass({data: this.getArg('data')}));
   },
 
   build: function (frag) {
@@ -294,7 +294,7 @@ Each = DebugComponent.extend({
 
 MyLI = DebugComponent.extend({
   init: function () {
-    this.setChild('1', LI, {text: this.args.data.text || ''});
+    this.setChild('1', LI, {text: this.getArg('data').text || ''});
   },
   build: function (frag) {
     var c = this.children['1'];

packages/ui/component.js

@@ -12,7 +12,8 @@ Component = function (args) {
   this._fragment = null; // DocumentFragment, if built; empty when attached
   this._uniqueIdCounter = 1;
 
-  this.args = args;
+  this._args = args;
+  this._argDeps = {};
 };
 
 _.extend(Component.prototype, {
@@ -221,9 +222,34 @@ _.extend(Component.prototype, {
 
     this.dom.end = end;
   },
+  getArg: function (argName) {
+    var dep = (this._argDeps.hasOwnProperty(argName) ?
+               this._argDeps[argName] :
+               (this._argDeps[argName] = new Deps.Dependency));
+    dep.depend();
+    return this._args[argName];
+  },
   update: function (args) {
-    var oldArgs = this.args;
-    this.args = args;
+    var oldArgs = this._args;
+    this._args = args;
+
+    var argDeps = this._argDeps;
+
+    for (var k in args) {
+      if (args.hasOwnProperty(k) &&
+          argDeps.hasOwnProperty(k) &&
+          ! EJSON.equal(args[k], oldArgs[k])) {
+        argDeps[k].invalidate();
+        delete oldArgs[k];
+      }
+    }
+    for (var k in oldArgs) {
+      if (oldArgs.hasOwnProperty(k) &&
+          argDeps.hasOwnProperty(k)) {
+        argDeps[k].invalidate();
+      }
+    }
+
     this.updated(args, oldArgs);
   },
   findOne: function (selector) { return this.dom.findOne(selector); },

packages/ui/package.js

@@ -3,6 +3,8 @@ Package.describe({
 });
 
 Package.on_use(function (api) {
+  api.use('underscore', 'client');
+
   api.add_files(['chunk.js', 'component.js'], 'client');
 });