ember.js - via actions add a component to a another component with ember 2.0 -


i learning ember , have come across problem solve.

i have component presents x amounts of buttons linked actions on component.

when 1 of these buttons pressed proper action should execute , in executing should add newly instantiated component component.

i realize proper way not let component x know component y, proper solution like?

i solved issue daisy chaining action source component destination component(the 1 wanted handle action).

component javascript:

export default ember.component.extend({   actions: {     elementselected: function(){       this.sendaction('elementselected', this.model);     }   } }); 

defining action not strictly required, code in javascript calls sendaction. sendaction exposes event world outside of component.

component template:

<div {{action 'elementselected'}}> </div> 

any subsequent component in chain needs bind action local action. implementation of action same first component (note pass whatever object/s original action through).

the binding:

{{component-some-component type="text" elementselected="elementselected"}} 

the implementation:

export default ember.component.extend({   actions: {     elementselected: function(model){       this.sendaction('elementselected', model);     }   } }); 

this solution still leaves issues: 1) every component in chain needs know action explicitly. 2) verbosity re-sending action @ each level.

sadly has lot how actions bubble in ember 2.3<.

by default, {{action}} helper triggers method on template's controller, illustrated above.

if controller not implement method same name action in actions object, action sent router, active leaf route given chance handle action.

source: https://guides.emberjs.com/v1.10.0/templates/actions/ (this particular link 1.10, still valid in 2.3)

as stated above, actions not bubble through component hierarchy, verbose daisy-chain solution explicitly bubble specific event through component hierarchy.

this might solved service or helper class, in opinion component actions exposed outside world should bubble through component chain before land in route.


Comments