Search code examples
ember.jsember-cli

How to set a a unique id to the elements of a DOM in ember.js

To add more context, I would like to incorporate Product Fruits to our ember app. The service that we will use is the Tours of Product Fruits. When creating a tour, product fruits target the element of client app with using id of an element. Ember generates ID for every element of the DOM. For example, if you have a button, the ID can be id="priority-navbar-item-ember110". However, if you refresh the page, the ID changes.

Question: Besides using data-test selectors, how can I have a unique id and will not change after refreshing the page or revisiting the app?

Solution

  • Hard to point to a good solution without extra information… I guess you are talking about this product?

    I have a couple of ideas, although they might not be relevant without more data:

    • Create a dynamic ID based on some unique property of what you are tracking;
    • Set hardcoded IDs for this tour (I’d probably go with this one).