mardi 13 novembre 2018

Rendering a component programmatically (not via template)

I'm working on an Ember app that's integrated with a separate SDK that has its own custom UI components. For example,

<integration-name-customer-view customer-name="Bob">

These components have render lifecycle hooks, like onRender, onCreate, etc.

I would like to hook into the onRender callback and insert an Ember component I have created (a tooltip with some special functionality).

Here's what I've attempted:

Integration-Customer-Name Definition

import MyTooltip from 'ember-app/components/my-tooltip';    

...

onRender() {
    let parent = this;

    MyTooltip
        .extend({
            layout: myTemplate,
            didRender: () {
                parent.appendChild(this.element);
            }
        })
        .create({ position: 'above' })
        .appendTo(document.body);
}

Now, this actually works, but I have two questions:

  1. Is this the right thing to do? Is there a simpler way/is this going to crash and burn?
  2. My template has a block in it. Is there a way to programmatically determine what is going to be rendered into that block?



Aucun commentaire:

Enregistrer un commentaire