Dynamic add/remove a component to the page via action

Question

I am creating a FlashCard app and I would like to dynamically insert a component with property into the view via the action inside the route. See screenshot below,

Click "Add Card" button
Dynamically create a card-editor component in the view

I think one possible way to achieve this is to add a conditional handlebar block inside the view and render the component based on the property state; however, I wish to keep my view as clean as possible and think it could be better if I can dynamically render a component to the view only when the action is triggered.

My solution

<div style="margin-left: 200px;">
    {{#if cardEditor}}
        {{app/card-editor}}
    {{/if}}
</div>

In view's controller

export default Ember.Controller.extend({
    cardEditor: false,

    actions: {
        addNewCardEditor() {
            this.set('cardEditor', true));
        }
    }
});

What I have tried

Based on the answer How to programatically add component via controller action in ember 2.x, but it does not work for me. I get an error,

ember.debug.js:41417 Uncaught Error: Cannot instantiate a component without a renderer. Please ensure that you are creating <(subclass of Ember.Component):ember604> with a proper container/registry.

Inside the view HTML,

{{app/side-bar
  addNewCardPressed='addNewCardEditor'
}}

Inside the view route,

import Ember from 'ember';
import CardEditorComponent from '../../components/app/card-editor';

export default Ember.Route.extend({    
    actions: {
        addNewCardEditor() {
            CardEditorComponent.create().appendTo($('body'));
        }
    }
});

Inside the component JS,

actions: {
    addNewCardPressed() {
        this.sendAction('addNewCardPressed');
    }
}

Question

So my question is how can I use the action inside the routes/home/index.js to render the component to the view.

The View HTML,

{{side-bar
  addNewCardPressed='addNewCardEditor'
}}

The Index Page route,

import Ember from 'ember';

export default Ember.Route.extend({
    actions: {
        addNewCardEditor(newCard){}
    }
});

What should I put inside the addNewCardEditor function to generate a component in the view on the fly?

Thanks for your time.

Your solution looks perfect to me. card-editor component will be instantiated/rendered only when card-editor is true. I think what you are trying(programmatically adding component) is overkill for your use case. IMO — Ember Freak
Using the {{#if}} helper is definitely the right solution for this in ember. The only other way to solve this is to use the route hierarchy. To programmatically change the DOM, adding components and stuff like this is something you really should avoid in ember whenever possible. — Lux

Julienm Julienm · Accepted Answer · 2017-06-02T07:28:05

in the global.js of your EmberCLI application:


    export function initialize(application) {
        window.EmberApp = application;  // or window.Whatever
    }

Where you want to create dynamically your component, even though it might look like a hack, there might be cleaner way to do it without relying on EmberCLI variables. "App" below is the namespace of your global EmberCLI application that you define in application.js.


    var component = App.CardEditorComponent.extend({ 
        renderer: window.EmberApp.__container__.lookup('renderer:-dom'),
    }).create();

    Ember.setOwner(component , window.EmberApp);
    component.append();

Dynamic add/remove a component to the page via action

1 Answers