CODEWITHSUNDEEP
ember.js
jax
jax

Reputation: 38653

Dynamic component creation in [email protected]

I have this piece of code in an addon that worked before Glimmer was introduced but is now failing since updating to [email protected].

        const self = this;

        ....

        const el = document.createElement('div');
        Ember.Component.create({
          model: model,
          layout: self.get('suggestionTemplate'),
        }).appendTo(el);
        return el;

I am now getting the following error

ember.debug.js:8722 Uncaught TypeError: Cannot read property 'hasRegistration' of undefined(…)

This is happening because the owner is "undefined" deep within the ember code when running the "hasHelper" function.

enter image description here

Is there something I can pass to the component creation to prevent this happening or is there a better way to do this? Essentially I need the RAW DOM for a third party API.

UPDATE

If model in the above code is an ember-data model everything works fine. If it is a string or Ember.Object it crashes.

Upvotes: 0

Views: 256

Answers (1)

jax
jax

Reputation: 38653

I managed to get this working by putting the result into an Ember Object. And injecting the parent renderer into the component. It appears that both were required to get this working.

        const self = this;

        ....

        const el = document.createElement('div');
        if (typeof model !== 'object') {
          model = Ember.Object.create({
            displayName: model
          });
        }
        Component.create({
          model,
          layout: self.get('suggestionTemplate'),
          renderer: self.renderer
        }).appendTo(el);
        return el;

Upvotes: 1

Related Questions