checkbox component, touch-ups

packages/spacebars/spacebars.js

@@ -981,7 +981,9 @@ Spacebars.extend = function (obj/*, k1, v1, k2, v2, ...*/) {
 };
 
 Spacebars.parseAttrs = function (attrs) {
-  if (attrs && (typeof attrs) === 'object')
+  if (! attrs)
+    return {};
+  else if (typeof attrs === 'object')
     return attrs;
   else
     throw new Error("XXX Should allow strings here");

packages/ui/base.js

@@ -297,7 +297,9 @@ _extend(UI.Component, {
     // instantiated", and `init` is the callback you get
     // when that happens.
     child.isInited = true;
-    callChainedCallback(child, 'init');
+    Deps.nonreactive(function () {
+      callChainedCallback(child, 'init');
+    });
 
     // useful in: `this.foo = this.add(Foo.extend())`
     return child;

packages/ui/components.js

@@ -63,7 +63,7 @@ UI.Unless = Component.extend({
 // for the demo.....
 // @export FadeyIf
 FadeyIf = Component.extend({
-  typeName: 'If',
+  typeName: 'FadeyIf',
   _animationOptions: { duration: 1000, queue: false },
   init: function () {
     this.condition = this.data;
@@ -100,7 +100,7 @@ FadeyIf = Component.extend({
             curCondition ? self.content : self.elseContent);
           if (self.hasChild(oldChild)) {
             $(oldChild.parentNode()).animate(
-              {height: 0, opacity: 0},
+              {height: 0, width: 0, opacity: 0},
               self._animationOptions,
               (function (oldChild) {
                 return function () {
@@ -115,7 +115,9 @@ FadeyIf = Component.extend({
           var newDiv = $('<div style="display:none"></div>');
           self.append(newDiv);
           self.insertBefore(newChild, null, newDiv.get(0));
-          newDiv.animate({height: 'show', opacity: 1},
+          newDiv.animate({height: 'show',
+                          width: 'show',
+                          opacity: 1},
                          self._animationOptions);
         }
       }
@@ -127,6 +129,39 @@ FadeyIf = Component.extend({
   }
 });
 
+// @export Checkbox
+Checkbox = UI.makeTemplate(Component.extend({
+  typeName: 'Checkbox',
+  init: function () {
+    var self = this;
+    if (typeof self.data === 'string') {
+      var field = self.data;
+      self.set('checked', self.get(field));
+
+      self.autorun(function (c) {
+        var checked = self.get('checked');
+        if (! c.firstRun)
+          self.set(field, checked);
+      });
+    }
+  },
+  render: function (buf) {
+    var self = this;
+    buf.write('<input type="checkbox"',
+              {attrs: function () {
+                return self.get('checked') ?
+                  {'checked':''} : {};
+              }},'>');
+  }
+}))({
+  fields: {checked: false},
+  'change input': function (evt) {
+    var comp = UI.Component.current;
+    var newChecked = !! evt.target.checked;
+    if (newChecked !== comp.get('checked'))
+      comp.set('checked', newChecked);
+  }
+});
 
 /*
 UI.Counter = Component.extend({

packages/ui/package.js

@@ -13,9 +13,9 @@ Package.on_use(function (api) {
                  'attrs.js',
                  'render.js',
                  'fields.js',
+                 'template.js',
                  'components.js',
-                 'each.js',
-                 'template.js']);
+                 'each.js']);
 });
 
 Package.on_test(function (api) {

packages/ui/render.js

@@ -31,6 +31,8 @@ var GT_OR_QUOTE = /[>'"]/;
 // component, just return it.  In this latter case, the
 // `props` argument must be falsy.
 constructify = function (comp, props) {
+  if (! comp)
+    throw new Error("No such component");
   if (props)
     // comp had better be uninited! (or will throw)
     return comp.extend(props);