Pass DOM element to Ember Component


#1

I’m trying to pass a DOM element into an Ember add on component

I’m the Toolbar component from this add-on:

In the raw non ember material-design-components a global script is used to do this: toolbar.fixedAdjustElement = document.querySelector('.mdc-toolbar-fixed-adjust');

Following through the code in the ember component it looks like the contentElement argument should contain the .mdc-toolbar-fixed-adjust element.

I’ve tried to do this… but it’s not working:

{{#mdc-toolbar isWaterfall=true isFixed=true isLastRowFixed=true isFlexible=true contentElement=Ember.$('.mdc-toolbar-fixed-adjust')[0]}}

https://ember-twiddle.com/78bb807277b50460cc8eda1161417983?openFiles=templates.application.hbs%2C

Is it possible to pass a DOM element into a component in this way?


#2

From the code it looks like you can do something like this:

{{#mdc-toolbar isWaterfall=true isFixed=true isLastRowFixed=true isFlexible=true contentSelector='.mdc-toolbar-fixed-adjust'}}

Trying to use jquery in a template definitely won’t work.

I guess you could also use the block form of the mdc-toolbar component like in the addon docs page or the dummy app


#3

contentSelector works great. Thanks