unsubscribe events

Author: josex2r

addon/components/wait-for-render.js

@@ -2,6 +2,8 @@ import Ember from 'ember';
 import layout from '../templates/components/wait-for-render';
 import { EVENT_NAME } from '../mixins/wait-for-render';
 
+const { subscribe, unsubscribe } = Ember.Instrumentation;
+
 /**
  * Defer component render until route has been rendered.
  * Route must implement 'wait-for-render' mixin.
@@ -63,6 +65,16 @@ export default Ember.Component.extend({
 	 */
 	loading: null,
 
+	/**
+	 * Stores component instrumentation object.
+	 *
+	 * @property _subscriber
+	 * @type Object
+	 * @default null
+	 * @public
+	 */
+	_subscriber: null,
+
 	/**
 	 * Subscribe to route events.
 	 *
@@ -72,10 +84,12 @@ export default Ember.Component.extend({
 	didInsertElement: function didInsertElement() {
 		this._super(...arguments);
 
-		Ember.subscribe(`${EVENT_NAME}.${this.get('for')}`, {
+		const subscriber = subscribe(`${EVENT_NAME}.${this.get('for')}`, {
 			before: Ember.K,
 			after: () => this._render()
 		});
+
+		this.set('_subscriber', subscriber);
 	},
 
 	/**
@@ -90,8 +104,16 @@ export default Ember.Component.extend({
 		}
 
 		this.set('_rendered', true);
+	},
+
+	/**
+	 * Destroy instrumentation binding.
+	 *
+	 * @method willDestroyElement
+	 * @private
+	 */
+	willDestroyElement() {
+		unsubscribe(this.get('_subscriber'));
 	}
 
-}).reopenClass({
-	positionalParams: ['for']
 });

addon/mixins/wait-for-render.js

@@ -1,5 +1,7 @@
 import Ember from 'ember';
 
+const { instrument } = Ember.Instrumentation;
+
 export const EVENT_NAME = 'wait-for-render';
 
 export default Ember.Mixin.create({
@@ -18,7 +20,7 @@ export default Ember.Mixin.create({
 				// Defer to the next cycle to allow a browser render
 				Ember.run.next(this, () => {
 					// Send a signal when template is fully rendered
-					Ember.instrument(`${EVENT_NAME}.${this.routeName}`, () => {
+					instrument(`${EVENT_NAME}.${this.routeName}`, () => {
 						// Set a flag for debugging purposes
 						this.set('_rendered', true);
 					});

bower.json

@@ -1,7 +1,10 @@
 {
   "name": "ember-wait-for-render",
   "dependencies": {
-    "ember": "~2.8.0",
+    "ember": "~1.13.0",
     "ember-cli-shims": "0.1.1"
+  },
+  "resolutions": {
+    "ember": "~1.13.0"
   }
-}
+}

tests/integration/components/wait-for-render-test.js

@@ -3,6 +3,8 @@ import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import { EVENT_NAME } from 'ember-wait-for-render/mixins/wait-for-render';
 
+const { instrument } = Ember.Instrumentation;
+
 moduleForComponent('wait-for-render', 'Integration | Component | wait for render', {
   integration: true
 });
@@ -17,17 +19,32 @@ test('it does not renders the content', function(assert) {
   assert.equal(this.$().text().trim(), '');
 });
 
-test('it renders the content when signal has been triggered', function(assert) {
+test('it renders the content when route is ready', function(assert) {
   const content = 'foo';
 
   this.set('content', content);
   this.render(hbs`{{#wait-for-render}}{{content}}{{/wait-for-render}}`);
 
   Ember.run(() => {
-    Ember.instrument(`${EVENT_NAME}.foo`, () => {
-      assert.ok(1);
-    });
+    instrument(`${EVENT_NAME}.*`, Ember.K);
+  });
+
+  Ember.run(() => {
+    assert.equal(this.$().text().trim(), content);
+  });
+});
+
+test('it renders the content when specific route is ready', function(assert) {
+  const content = 'foo';
+
+  this.set('content', content);
+  this.render(hbs`{{#wait-for-render for=content}}{{content}}{{/wait-for-render}}`);
+
+  Ember.run(() => {
+    instrument(`${EVENT_NAME}.${content}`, Ember.K);
   });
 
-  assert.equal(this.$().text().trim(), content);
+  Ember.run(() => {
+    assert.equal(this.$().text().trim(), content);
+  });
 });

tests/unit/mixins/wait-for-render-test.js

@@ -3,6 +3,8 @@ import WaitForRenderMixin from 'ember-wait-for-render/mixins/wait-for-render';
 import { EVENT_NAME } from 'ember-wait-for-render/mixins/wait-for-render';
 import { module, test } from 'qunit';
 
+const { subscribe } = Ember.Instrumentation;
+
 module('Unit | Mixin | wait for render');
 
 test('it works in a Route object', function(assert) {
@@ -32,7 +34,7 @@ test('it does not works if object is not a Route', function(assert) {
     routeName
   });
 
-  Ember.subscribe(`${EVENT_NAME}.${routeName}`, {
+  subscribe(`${EVENT_NAME}.${routeName}`, {
     before: () => assert.ok(1),
     after: () => {
       assert.ok(1);
@@ -53,7 +55,7 @@ test('it toggles \'_rendered\' property', function(assert) {
     routeName
   });
 
-  Ember.subscribe(`${EVENT_NAME}.${routeName}`, {
+  subscribe(`${EVENT_NAME}.${routeName}`, {
     before: () => Ember.K,
     after: () => {
       assert.ok(subject.get('_rendered'));