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: https://github.com/aonawale/ember-material-components

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]}}

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

1 Like
3

contentSelector works great. Thanks