<MainContent>

`</>, this, @, etc.`
emberjs · Oct 1, 2019 · df45d75 · df45d75
1 parent 53a5881
commit df45d75
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/app/components/main-content.js b/app/components/main-content.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { schedule } from '@ember/runloop';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { task, timeout } from 'ember-concurrency';
 
@@ -14,15 +14,29 @@ export default Component.extend({
    */
   layoutService: service('layout'),
 
-  didInsertElement() {
+  /**
+   * Reference to drag-handle on mousedown
+   *
+   * @property el
+   * @type {DOMNode|null}
+   * @default null
+   */
+  el: null,
+
+  setupListeners: action(function(element) {
+    this.el = element;
+
     this._performUpdateHeight = () => {
       this.updateHeightDebounce.perform();
     };
 
     window.addEventListener('resize', this._performUpdateHeight);
-    schedule('afterRender', this, this.updateHeight);
-    return this._super(...arguments);
-  },
+    this.updateHeight();
+  }),
+
+  destroyListeners: action(function() {
+    window.removeEventListener('resize', this._performUpdateHeight);
+  }),
 
   /**
    * Restartable Ember Concurrency task that triggers
@@ -48,11 +62,6 @@ export default Component.extend({
    * @method updateHeight
    */
   updateHeight() {
-    this.layoutService.updateContentHeight(this.element.clientHeight);
+    this.layoutService.updateContentHeight(this.el.clientHeight);
   },
-
-  willDestroyElement() {
-    window.removeEventListener('resize', this._performUpdateHeight);
-    return this._super(...arguments);
-  }
 });
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -38,9 +38,9 @@
                 </button>
               </div>
 
-              {{#main-content class="split__panel__bd"}}
+              <MainContent class="split__panel__bd">
                 {{outlet}}
-              {{/main-content}}
+              </MainContent>
             </div>
           </div>
 

diff --git a/app/templates/components/main-content.hbs b/app/templates/components/main-content.hbs
@@ -0,0 +1,7 @@
+<div
+  {{did-insert this.setupListeners}}
+  {{will-destroy this.destroyListeners}}
+  ...attributes
+>
+  {{yield}}
+</div>
diff --git a/lib/ui/addon/components/resizable-column.js b/lib/ui/addon/components/resizable-column.js
@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { action, computed } from '@ember/object';
+import { computed } from '@ember/object';
 import { htmlSafe } from '@ember/string';
 import layout from '../templates/components/resizable-column';