Ember.js Component Moving DOM elements

Question

I have an Ember.js component called table-viewer. It has a toolbar which is a div with buttons. I have another ember component called report-viewer. It contains a variety of things including a table-viewer.

I want to have report-viewer add some buttons to the toolbar. What I have works but breaks the Ember connection with the element so I can't change the button text after moving it. Is there a better way to do this?

I have a lot more components than I just said, so defining the complete toolbar in table-viewer and setting flags for what to show would be annoying to manage.

Below is what I currently have in table-viewer so that any component can add additional buttons to the toolbar:

Ember.$('#toolbar').append(Ember.$('#additionalToolbar').html());
Ember.$('#additionalToolbar').remove();

You should be relying on bindings to show/hide things, you rarely need to interact with the DOM directly when you're using ember, can you share your template? — Patsy Issa, Feb 20 '16 at 07:06

score 1 · Answer 1 · answered Feb 19 '16 at 20:11

1

I figured it out! The following works without breaking Ember connections:

Ember.$('#additionalToolbar > button').appendTo(Ember.$('#toolbar'));

answered Feb 19 '16 at 20:11

Alec Fenichel

1,257
1
13
27

As @Kitler pointed out, it is rarely a good idea to use jquery to manipulated the dom when using ember. – Patrick Berkeley Feb 20 '16 at 08:33

score 0 · Answer 2 · edited May 23 '17 at 12:15

It's hard to say what the best approach is without seeing the relevant code. That said, my first suggestion would be a simple yield:

report-viewer/template.hbs

{{#table-viewer}}
  <button>
    Some button from the report viewer...
  </button>
{{/table-viewer}}

table-viewer/template.hbs

<nav>
  <button>
    Button one
  </button>
  <button>
    Button two
  </button>
  {{yield}}
</nav>
<table>
  ...
</table>

If you need more that one yield, you can achieve multiple named yields with this approach.

I'd also suggest splitting the toolbar out into its own component if you haven't already. It feels wrong to put a toolbar button as the block contents of the table-viewer component as I've done above.

Ember.js Component Moving DOM elements

2 Answers2