Stop using private property childViews

And go back to a registration approach.
adopted-ember-addons · Sep 1, 2016 · 889f76c · 889f76c
1 parent e682e63
commit 889f76c
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 54 deletions.
diff --git a/addon/components/x-option.js b/addon/components/x-option.js
@@ -52,6 +52,10 @@ export default Ember.Component.extend({
    */
   didInsertElement() {
     this._super.apply(this, arguments);
+
+    Ember.run.scheduleOnce('afterRender', () => {
+      this.get('register')(this);
+    });
   },
 
   /**
@@ -60,6 +64,7 @@ export default Ember.Component.extend({
    * @override
    */
   willDestroyElement: function() {
+    this.get('unregister')(this);
     this._super.apply(this, arguments);
   }
 });
diff --git a/addon/components/x-select.js b/addon/components/x-select.js
@@ -44,6 +44,17 @@ export default Ember.Component.extend({
    */
   multiple: null,
 
+  /**
+   * The collection of options for this select box. When options are
+   * rendered as a child from x-select, they will register themselves with their
+   * containing `x-select`. This is for internal book-keeping only and should
+   * not be changed from outside.
+   *
+   * @private
+   * @property options
+   */
+  options: Ember.A([]),
+
   /**
    * Bound to the `tabindex` attribute on the native <select> tag.
    *
@@ -98,8 +109,7 @@ export default Ember.Component.extend({
    * @return {Array|Object} the current selection
    */
   _getValue() {
-    // TODO: childViews is a private property. Find something else.
-    let options = this.childViews.filter(function(option) {
+    let options = this.get('options').filter(function(option) {
       return option.$().is(':selected');
     });
 
@@ -129,7 +139,6 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super.apply(this, arguments);
 
-    Ember.run.scheduleOnce('afterRender', this, '_setDefaultValues');
     this.$().on('blur', (event) => {
       this.blur(event);
     });
@@ -156,5 +165,17 @@ export default Ember.Component.extend({
     if (value != null && this.get('multiple') && !isArray(value)) {
       throw new Error(`x-select multiple=true was set, but value ${value} is not enumerable.`);
     }
-  }))
+  })),
+
+  actions: {
+    registerOption(option) {
+      this.get('options').push(option);
+      this._setDefaultValues();
+    },
+
+    unregisterOption(option) {
+      this.get('options').removeObject(option);
+      this._setDefaultValues();
+    }
+  }
 });
diff --git a/addon/templates/current/components/x-select.hbs b/addon/templates/current/components/x-select.hbs
@@ -1,5 +1,5 @@
 {{yield
   (hash
-    option=(component "x-option" select=this)
+    option=(component "x-option" select=this register=(action 'registerOption') unregister=(action 'unregisterOption'))
   )
 }}
diff --git a/tests/dummy/app/templates/ember-data.hbs b/tests/dummy/app/templates/ember-data.hbs
@@ -1,8 +1,8 @@
 <div>
-  {{#x-select value=model.name}}
-    {{#x-option value="Larry"}}Larry{{/x-option}}
-    {{#x-option value="Ollie"}}Ollie{{/x-option}}
-    {{#x-option value="Wally"}}Wally{{/x-option}}
+  {{#x-select value=model.name as |xs|}}
+    {{#xs.option value="Larry"}}Larry{{/xs.option}}
+    {{#xs.option value="Ollie"}}Ollie{{/xs.option}}
+    {{#xs.option value="Wally"}}Wally{{/xs.option}}
   {{/x-select}}
 
   <p>Model: {{model.name}}</p>

diff --git a/tests/dummy/app/templates/events/blur.hbs b/tests/dummy/app/templates/events/blur.hbs
@@ -1,9 +1,9 @@
 <h2>Blur</h2>
 
-{{#x-select value=it onblur="onBlur"}}
-  {{#x-option value=charles}}Charles{{/x-option}}
-  {{#x-option value=bastion}}Bastion{{/x-option}}
-  {{#x-option value=stanley}}Stanley{{/x-option}}
+{{#x-select value=it onblur="onBlur" as |xs|}}
+  {{#xs.option value=charles}}Charles{{/xs.option}}
+  {{#xs.option value=bastion}}Bastion{{/xs.option}}
+  {{#xs.option value=stanley}}Stanley{{/xs.option}}
   <option>Nobody</option>
 {{/x-select}}
 

diff --git a/tests/dummy/app/templates/events/click.hbs b/tests/dummy/app/templates/events/click.hbs
@@ -1,9 +1,9 @@
 <h2>Click</h2>
 
-{{#x-select value=it onclick="onClick"}}
-  {{#x-option value=charles}}Charles{{/x-option}}
-  {{#x-option value=bastion}}Bastion{{/x-option}}
-  {{#x-option value=stanley}}Stanley{{/x-option}}
+{{#x-select value=it onclick="onClick" as |xs|}}
+  {{#xs.option value=charles}}Charles{{/xs.option}}
+  {{#xs.option value=bastion}}Bastion{{/xs.option}}
+  {{#xs.option value=stanley}}Stanley{{/xs.option}}
   <option>Nobody</option>
 {{/x-select}}
 

diff --git a/tests/dummy/app/templates/events/focus-out.hbs b/tests/dummy/app/templates/events/focus-out.hbs
@@ -1,9 +1,9 @@
 <h2>Focus Out</h2>
 
-{{#x-select value=it onfocusout="focusOut"}}
-  {{#x-option value=charles}}Charles{{/x-option}}
-  {{#x-option value=bastion}}Bastion{{/x-option}}
-  {{#x-option value=stanley}}Stanley{{/x-option}}
+{{#x-select value=it onfocusout="focusOut" as |xs|}}
+  {{#xs.option value=charles}}Charles{{/xs.option}}
+  {{#xs.option value=bastion}}Bastion{{/xs.option}}
+  {{#xs.option value=stanley}}Stanley{{/xs.option}}
   <option>Nobody</option>
 {{/x-select}}
 

diff --git a/tests/dummy/app/templates/zany-embedded-html.hbs b/tests/dummy/app/templates/zany-embedded-html.hbs
@@ -3,12 +3,12 @@
   <button {{action "populate"}}>Populate</button>
 </p>
 <p>
-  {{#x-select value=thing}}
+  {{#x-select value=thing as |xs|}}
     <option>Choose one of the following zaney options! ...</option>
     {{#each groupsOfZanyThings as |group|}}
       <optgroup label={{group.label}}>
         {{#each group.things as |thing|}}
-          {{#x-option value=thing}}{{thing.description}}{{/x-option}}
+          {{#xs.option value=thing}}{{thing.description}}{{/xs.option}}
         {{/each}}
       </optgroup>
     {{/each}}

diff --git a/tests/integration/components/two-way-data-binding-test.js b/tests/integration/components/two-way-data-binding-test.js
@@ -20,10 +20,10 @@ describeComponent(
         this.set('onBlur', (x, value)=> this.blur = value);
 
         this.render(hbs`
-          {{#x-select value=make one-way=true action=capture onclick=onClick onfocusout=onFocusOut onblur=onBlur}}
-            {{#x-option value="ford"}}Ford{{/x-option}}
-            {{#x-option value="chevy"}}Chevy{{/x-option}}
-            {{#x-option value="dodge" class="spec-dodge-option"}}Dodge{{/x-option}}
+          {{#x-select value=make one-way=true action=capture onclick=onClick onfocusout=onFocusOut onblur=onBlur as |xs|}}
+            {{#xs.option value="ford"}}Ford{{/xs.option}}
+            {{#xs.option value="chevy"}}Chevy{{/xs.option}}
+            {{#xs.option value="dodge" class="spec-dodge-option"}}Dodge{{/xs.option}}
           {{/x-select}}
         `);
       });
@@ -63,10 +63,10 @@ describeComponent(
         });
 
         this.render(hbs`
-          {{#x-select value=make one-way=true action=selectAction}}
-            {{#x-option value="fordValue" class="spec-ford-option"}}Ford{{/x-option}}
-            {{#x-option value="chevyValue"}}Chevy{{/x-option}}
-            {{#x-option value="dodgeValue" class="spec-dodge-option"}}Dodge{{/x-option}}
+          {{#x-select value=make one-way=true action=selectAction as |xs|}}
+            {{#xs.option value="fordValue" class="spec-ford-option"}}Ford{{/xs.option}}
+            {{#xs.option value="chevyValue"}}Chevy{{/xs.option}}
+            {{#xs.option value="dodgeValue" class="spec-dodge-option"}}Dodge{{/xs.option}}
           {{/x-select}}
         `);
       });

diff --git a/tests/unit/components/x-option-test.js b/tests/unit/components/x-option-test.js