Automate reflected properties in SkyElement.

sky/framework/sky-radio/sky-radio.sky

Index: sky/framework/sky-radio/sky-radio.sky
diff --git a/sky/framework/sky-radio/sky-radio.sky b/sky/framework/sky-radio/sky-radio.sky
index 0be600ae588d6d3cf0cba470fa6efe4962fec128..931de46d8119ff45d7b09e607d1096813e402e26 100644
--- a/sky/framework/sky-radio/sky-radio.sky
+++ b/sky/framework/sky-radio/sky-radio.sky
@@ -5,7 +5,7 @@
 -->
 <import src="/sky/framework/sky-button/sky-button.sky" as="SkyButton" />
 
-<sky-element name="sky-radio">
+<sky-element name="sky-radio" attributes="selected:boolean, group:string">
 <template>
   <style>
     :host {
@@ -50,14 +50,15 @@ class RadioGroupController {
   addRadio(radio) {
     this.radios.add(radio);
     // If this new radio is default-selected, take selection from the group.
-    if (radio.selected)
+    if (radio.selected) {
       this.takeSelectionFromGroup(radio);
+    }

[abarth-chromium, 2015/01/06 04:02:38]

Why add the braces?

[esprehn, 2015/01/06 04:10:24]

Woops, that was from debugging.

   }
   removeRadio(radio) {
     this.radios.remove(radio);
   }
   takeSelectionFromGroup(selectedRadio) {
-    // Emtpy/null/undefined group means and isolated radio.
+    // Emtpy/null/undefined group means an isolated radio.
     if (!selectedRadio.group)
       return;
     this.radios.forEach(function(radio) {
@@ -65,38 +66,38 @@ class RadioGroupController {
         return;
       if (radio.group != selectedRadio.group)
         return;
-      radio.setSelected(false);
-    })
+      radio.selected = false;
+    });
   }
 };
 
 module.exports = class extends SkyButton {
   created() {
     super.created();
-    this.setSelected(this.getAttribute('selected'));
-    this.group = this.getAttribute('group');
+
+    this.controller = null;
 
     this.addEventListener("mouseup", function() {
-      this.setSelected(true);
+      this.selected = true;
     });
-    this.cachedController = null;
   }
   attached() {
     super.attached();
-    this.cachedController = RadioGroupController.forRadio(this);
-    this.cachedController.addRadio(this);
+    this.controller = RadioGroupController.forRadio(this);
+    this.controller.addRadio(this);
   }
   detached() {
     super.detached();
-    this.cachedController.removeRadio(this);
+    this.controller.removeRadio(this);
+    this.controller = null;
   }
-  setSelected(selected) {
-    if (selected == this.selected)
-      return;
-    this.setAttribute('selected', selected);
-    this.selected = selected;
-    if (selected && this.cachedController)
-      this.cachedController.takeSelectionFromGroup(this);
+  selectedChanged(oldValue, newValue) {
+    if (newValue && this.controller)
+      this.controller.takeSelectionFromGroup(this);
+  }
+  groupChanged(oldValue, newValue) {
+    if (this.selected && this.controller)
+      this.controller.takeSelectionFromGroup(this);
   }
 }.register();
 </script>