diff --git a/addon/components/wait-for-render.js b/addon/components/wait-for-render.js index 4d14dc6..c11ec5a 100644 --- a/addon/components/wait-for-render.js +++ b/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'] }); diff --git a/addon/mixins/wait-for-render.js b/addon/mixins/wait-for-render.js index 8e10a79..6cb0d32 100644 --- a/addon/mixins/wait-for-render.js +++ b/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); }); diff --git a/bower.json b/bower.json index 3ef72f0..e6f19ff 100644 --- a/bower.json +++ b/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" } -} +} \ No newline at end of file diff --git a/tests/integration/components/wait-for-render-test.js b/tests/integration/components/wait-for-render-test.js index 97df394..ca839c1 100644 --- a/tests/integration/components/wait-for-render-test.js +++ b/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); + }); }); diff --git a/tests/unit/mixins/wait-for-render-test.js b/tests/unit/mixins/wait-for-render-test.js index 8c7e9be..3483e4d 100644 --- a/tests/unit/mixins/wait-for-render-test.js +++ b/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'));