CODEWITHSUNDEEP
ember.js
jesenko
jesenko

Reputation: 1293

Obtaining component elementId in parent template

I would like to obtain component auto-generated elementId in parent template, e.g.

<script type="text/x-handlebars" data-template-name="index">
  my-component elementId: {{myComponentElementId}}
  {{my-component}}
</script>

Is there a simple way to do this without altering parent controller or my-component?

Upvotes: 0

Views: 543

Answers (4)

jesenko
jesenko

Reputation: 1293

I was able to access elementId by:

  • explicitly naming component using its viewName attribute
  • accessing component by its name from parent template view.[componentName].elementId

Example:

<script type="text/x-handlebars" data-template-name="index">
  my-component elementId: {{view.myComponent.elementId}}
  {{my-component viewName="myComponent"}}
</script>

JsBin

NOTE

With introduction of Glimmer rendering engine (Ember version >=1.13), accessing elementId via viewName is not supported any more.

Instead, component's elementId should be explicitly set to specific value, e.g.

Example:

<script type="text/x-handlebars" data-template-name="index">
  my-component elementId: index-my-component
  {{my-component id="index-my-component"}}
</script>

In this case, it is up to developer to make sure that elementId is unique within page DOM. If template is to be rendered multiple times, elementId should be concatenated from parent component elementId and some predefined id (see JsBin)

Upvotes: 0

mistahenry
mistahenry

Reputation: 8724

The problem (ie the source of your error message) is you're trying to override the component's elementId property via attribute binding. I have run into this issue when trying to pass in id. A simple work around is to use _elementId or any other word that isn't elementId. Check the JSBin

Upvotes: 0

Kuba Niechciał
Kuba Niechciał

Reputation: 974

elementId is being generated during initialization of the component. You can be sure that the ID is set after the component is fully inserted into DOM. Therefore, you can use didInsertElement action like this:

some-example elementId: {{myComponentElementId}}
{{some-example elementIdProxy=myComponentElementId}}

didInsertElement: function() {
  this.set("elementIdProxy", this.get("elementId"));
}

Thus, you proxy the elementId via some other binding (elementIdProxy in this situation). I strongly recommend not to set up the ID explicitly, as it must be unique within the app. Ember takes care about that, so it's not a good idea to reinvent the wheel.

Fully working example in JSBin is here

Upvotes: 1

blessanm86
blessanm86

Reputation: 31779

In your bin you are trying to pass an id but not specified the value on the controller. Set the id value in the setupCotroller hook on the controller and that value will be used as the id.

Otherwise you will need to pass the id up via actions. Here is the link.

Upvotes: 0

Related Questions