How to access inner component DOM before rendering?


Hello all…

I want to access inner DOM nodes from component code before rendering. Example:

// Some template.
{{#data-table items=model}}
    <th>Driver class</th>
    <th>Connection string</th>

// data-table.hbs
{{#each items as |item|}}
    {{#each columns as |column|}}
      <td>Hello, datatable...</td>

// data-table.js
export default Ember.Component.extend({
  tagName: 'table',
  classNames: ['ui', 'table'],

  items: [],
  columns: [],

  // How to access inner thead > tr > th elements from some-template.hbs for columns property initialization?

Is it possible?


Can you explain a little further what it is you’d like to do with that inner component DOM?

With only limited information, I might think that yielding a “contextual component” might be the path you want to head down. (As this may give you both the flexibility and control that you want!).

Here’s a good blog post that looks at how you might do that:


I want to initialize columns property of data-table control from inner markup. In example above i define 4 columns (id, name, driver class, connection string) in template inside {{#data-table}} component. So, inside component implementation i want to get inner thead > tr element, and for each th element initialize object in columns property. Then, when component will be rendered, i want to use this initialized property for rendering td table elements. I know, that i can pass columns property outside, as example from controller, but i want to configure my grid component declaratively trough DOM.


Instead of re-inventing the wheel, I suggest you to use a data-grid addon. For a contextual data-table: ember-contextual-table For a declerative data-table: ember-light-table

You may find many different alternatives from