vendredi 4 décembre 2015

Correct way to manually construct ember component and allow actions to be picked up by controller

I have a component addon project and I want to allow users to supply their own sub component. This is wrapping a JQuery library so I don't have the possibility of using traditional ember concepts such as {{#each}} or the {{component}} helper. For this reason I need to create the component in JS code.

User will supply an itemComponent to my-component;

controller

import customUserComponent from './custom-user-component'

export default Ember.Controller.extend({
    customUserComponent
})

template

{{my-component itemComponent=customUserComponent}}

The itemComponent is passed to the JQuery library and created when needed by the library. It expects the raw HTML so I need to return item.element. I Have to create it manually as follows.

      suggestion: function(model) {
        const item = this.get('itemComponent').create({
          model: model
        }).createElement();
        return item.element;
      },

The component the user supplies could have buttons and ember {{actions}} in it. How can I force the action to be picked up by the controller and not swallowed by my-component? Is there an official way of doing this?




Aucun commentaire:

Enregistrer un commentaire