Clean up some Glimmer deprecations

addon/components/x-option.js

@@ -52,10 +52,12 @@ export default Ember.Component.extend({
   didInsertElement: function() {
     this._super.apply(this, arguments);
 
-    var select = this.nearestOfType(XSelectComponent);
-    Ember.assert("x-option component declared without enclosing x-select", !!select);
-    this.set('select', select);
-    select.registerOption(this);
+    Ember.run.scheduleOnce('afterRender', () => {
+      var select = this.nearestOfType(XSelectComponent);
+      Ember.assert("x-option component declared without enclosing x-select", !!select);
+      this.set('select', select);
+      select.registerOption(this);
+    });
   },
 
   /**

addon/components/x-select.js

@@ -24,7 +24,7 @@ var isArray = Ember.isArray;
 export default Ember.Component.extend({
   tagName: "select",
   classNameBindings: [":x-select"],
-  attributeBindings: ['disabled', 'tabindex', 'multiple', 'name', 'autofocus', 'form', 'required', 'size'],
+  attributeBindings: ['disabled', 'tabindex', 'multiple', 'name', 'autofocus', 'required', 'size'],
 
   /**
    * Bound to the `disabled` attribute on the native <select> tag.
@@ -129,37 +129,23 @@ export default Ember.Component.extend({
     return Ember.A();
   }),
 
-  /**
-   * Listen for change events on the native <select> element, which
-   * indicates that the user has chosen a new option from the
-   * dropdown. If there is an associated `x-option` component that is
-   * selected, then the overall value of `x-select` becomes the value
-   * of that option.
-   *
-   * @override
-   */
-  didInsertElement: function() {
-    this._super.apply(this, arguments);
-
-    this.$().on('change', Ember.run.bind(this, function() {
-      this._contentDidChange();
-    }));
-  },
+  _setFormAttribute: Ember.on('didRender', function() {
+    this.$().attr('form', this.get('form'));
+  }),
 
   /**
-   * Triggers an update of the selected options.
-   * Observing `content` ensures that if an element is removed that
-   * is also part of the selection, selection is cleared.
-   *
-   * @private
+   * When the select DOM event fires on the element, trigger the
+   * component's action with the current value.
    */
-  _contentDidChange: Ember.observer('content.@each', function() {
+  change() {
     if (this.get('multiple')) {
       this._updateValueMultiple();
     } else {
       this._updateValueSingle();
     }
-  }),
+
+    this.sendAction('action', this.get('value'), this);
+  },
 
   /**
    * Updates `value` with the object associated with the selected option tag
@@ -174,7 +160,7 @@ export default Ember.Component.extend({
     if (option) {
       this.set('value', option.get('value'));
     } else {
-      this.set('value', undefined);
+      this.set('value', null);
     }
   },
 
@@ -195,7 +181,6 @@ export default Ember.Component.extend({
     } else {
       this.set('value', newValues);
     }
-    this.raiseAction();
   },
 
   /**
@@ -204,21 +189,10 @@ export default Ember.Component.extend({
   willDestroyElement: function() {
     this._super.apply(this, arguments);
 
-    this.$().off('change');
     // might be overkill, but make sure options can get gc'd
     this.get('options').clear();
   },
 
-  /**
-   * XSelect supports both two-way binding as well as an action. Observe the
-   * `value` property, and when it changes, raise that as an action.
-   *
-   * @private
-   */
-  raiseAction: Ember.observer('value', function() {
-    this.sendAction('action', this.get('value'), this);
-  }),
-
   /**
    * If this is a multi-select, and the value is not an array, that
    * probably indicates a misconfiguration somewhere, so we error out.

app/templates/components/x-select.hbs

@@ -1,4 +1,4 @@
-{{#if template}}
+{{#if hasBlock}}
   {{yield}}
 {{else}}
   {{#if placeholder}}

bower.json

@@ -2,7 +2,7 @@
   "name": "emberx-select",
   "dependencies": {
     "jquery": "^1.11.1",
-    "ember": "1.10.0",
+    "ember": "1.13.2",
     "ember-data": "1.0.0-beta.15",
     "ember-resolver": "~0.1.12",
     "loader.js": "ember-cli/loader.js#3.2.0",

package.json

@@ -20,7 +20,7 @@
   "devDependencies": {
     "broccoli-asset-rev": "2.0.6",
     "ember-cli": "0.2.7",
-    "ember-cli-app-version": "0.3.2",
+    "ember-cli-app-version": "0.4.0",
     "ember-cli-content-security-policy": "0.3.0",
     "ember-cli-dependency-checker": "0.0.8",
     "ember-cli-htmlbars": "0.7.4",

tests/.jshintrc

@@ -22,7 +22,8 @@
     "andThen",
     "currentURL",
     "currentPath",
-    "currentRouteName"
+    "currentRouteName",
+    "getComponentById"
   ],
   "node": false,
   "browser": false,

tests/acceptance/x-select-multiple-blockless-test.js

@@ -9,15 +9,15 @@ import { bastion, stanley, charles } from 'dummy/mixins/folks';
 
 var App;
 
-describe('XSelect: Multiple Selection', function() {
+describe('XSelect: Multiple Selection (Blockless)', function() {
   var component, controller;
   beforeEach(function() {
     App = startApp();
     visit("/blockless-multiple");
   });
   beforeEach(function() {
     var el = Ember.$('select');
-    component = Ember.View.views[el.attr('id')];
+    component = getComponentById(el.attr('id'));
     this.$ = function() {
       return component.$.apply(component, arguments);
     };

tests/acceptance/x-select-multiple-test.js

@@ -17,7 +17,7 @@ describe('XSelect: Multiple Selection', function() {
   });
   beforeEach(function() {
     var el = Ember.$('select');
-    component = Ember.View.views[el.attr('id')];
+    component = getComponentById(el.attr('id'));
     this.$ = function() {
       return component.$.apply(component, arguments);
     };

tests/acceptance/x-select-single-blockless-option-value-test.js

@@ -17,7 +17,7 @@ describe('XSelect: Single Selection Blockless w/ Option Value', function() {
   });
   beforeEach(function() {
     var el = Ember.$('select');
-    component = Ember.View.views[el.attr('id')];
+    component = getComponentById(el.attr('id'));
     this.$ = function() {
       return component.$.apply(component, arguments);
     };
@@ -89,7 +89,7 @@ describe('XSelect: Single Selection Blockless w/ Option Value', function() {
       this.$().prop('selectedIndex', 4).trigger('change');
     });
     it("has no value", function() {
-      expect(controller.get('tagged')).to.equal(undefined);
+      expect(controller.get('tagged')).to.equal(null);
     });
   });
 

tests/acceptance/x-select-single-blockless-test.js

@@ -17,7 +17,7 @@ describe('XSelect: Single Selection Blockless', function() {
   });
   beforeEach(function() {
     var el = Ember.$('select');
-    component = Ember.View.views[el.attr('id')];
+    component = getComponentById(el.attr('id'));
     this.$ = function() {
       return component.$.apply(component, arguments);
     };
@@ -84,7 +84,7 @@ describe('XSelect: Single Selection Blockless', function() {
       this.$().prop('selectedIndex', 4).trigger('change');
     });
     it("has no value", function() {
-      expect(controller.get('tagged')).to.equal(undefined);
+      expect(controller.get('tagged')).to.equal(null);
     });
   });
 

tests/acceptance/x-select-single-test.js

@@ -17,7 +17,7 @@ describe('XSelect: Single Selection', function() {
   });
   beforeEach(function() {
     var el = Ember.$('select');
-    component = Ember.View.views[el.attr('id')];
+    component = getComponentById(el.attr('id'));
     this.$ = function() {
       return component.$.apply(component, arguments);
     };
@@ -79,7 +79,7 @@ describe('XSelect: Single Selection', function() {
       this.$().prop('selectedIndex', 4).trigger('change');
     });
     it("has no value", function() {
-      expect(controller.get('tagged')).to.equal(undefined);
+      expect(controller.get('tagged')).to.equal(null);
     });
   });
 

tests/dummy/app/controllers/application.js

@@ -1,6 +1,6 @@
 import Ember from 'ember';
 
 
-export default Ember.ObjectController.extend({
+export default Ember.Controller.extend({
 
 });

tests/dummy/app/controllers/blockless-multiple.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 import Folks from 'dummy/mixins/folks';
 
-export default Ember.ObjectController.extend(Folks, {
+export default Ember.Controller.extend(Folks, {
   isDisabled: false,
   actions: {
     tagYouAreIt: function(object) {

tests/dummy/app/controllers/blockless-single.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 import Folks from 'dummy/mixins/folks';
 
-export default Ember.ObjectController.extend(Folks, {
+export default Ember.Controller.extend(Folks, {
   isDisabled: false,
   actions: {
     tagYouAreIt: function(object) {

tests/dummy/app/controllers/multiple.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 import Folks from 'dummy/mixins/folks';
 
-export default Ember.ObjectController.extend(Folks, {
+export default Ember.Controller.extend(Folks, {
   actions: {
     selectionsChanged: function(selections) {
       this.set('currentSelections', selections);

tests/dummy/app/controllers/single.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 import Folks from 'dummy/mixins/folks';
 
-export default Ember.ObjectController.extend(Folks, {
+export default Ember.Controller.extend(Folks, {
   isDisabled: false,
   isRequired: false,
   hasAutofocus: false,

tests/dummy/app/templates/blockless-multiple.hbs

@@ -7,15 +7,15 @@
 </p>
 <p>Selected:</p>
 <ul>
-{{#each selection in model}}
+{{#each model as |selection|}}
   <li>{{selection.name}}</li>
 {{else}}
   <li>(None)</li>
 {{/each}}
 </ul>
 <p>All options:</p>
 <ul>
-{{#each folk in folks}}
+{{#each folks as |folk|}}
   <li>{{folk.name}} - <a href="#" {{action "removeFolk" folk}}>Remove Folk</a></li>
 {{else}}
   <li>(None)</li>

tests/dummy/app/templates/blockless-single.hbs

@@ -8,7 +8,7 @@
 <p>Selected: {{it.name}}</p>
 <p>All options:</p>
 <ul>
-{{#each folk in folks}}
+{{#each folks as |folk|}}
   <li>{{folk.name}} - <a href="#" {{action "removeFolk" folk}}>Remove Folk</a></li>
 {{else}}
   <li>(None)</li>

tests/dummy/app/templates/multiple.hbs

@@ -8,7 +8,7 @@
 </p>
 <p>Selected:</p>
 <ul>
-{{#each selection in model}}
+{{#each model as |selection|}}
   <li>{{selection.name}}</li>
 {{else}}
   <li>(None)</li>

tests/helpers/get-component-by-id.js

@@ -0,0 +1,11 @@
+import Ember from "ember";
+
+function getComponentById(app, id) {
+  return app.__container__.lookup('-view-registry:main')[id];
+}
+
+const customHelpers = (function() {
+  Ember.Test.registerHelper('getComponentById', getComponentById);
+})();
+
+export default customHelpers;

tests/helpers/start-app.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 import Application from '../../app';
 import Router from '../../router';
 import config from '../../config/environment';
+import getComponentById from './get-component-by-id';
 
 export default function startApp(attrs) {
   var application;