How to access inner component DOM before rendering?

1

Hello all…

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

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

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

// 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?

2

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: Creating an Accordion with Contextual Components in Ember - Mutually Human

3

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.

4

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 emberobserver.com