Best pattern: How to call template within a modal and get a return value?

help
1

Hi guys,

let’s say we have a mother-template showing some data. The user now needs to pick some data…

I’d like to do the following:

  1. Call a child-template within a modal-window - passing it some data. (dynamic rendering to the dom would be cool, but does not need to be)
  2. Let the user pick some value within the modal window
  3. Pass the picked-value back to the mother-component and proceed accordingly

Have you guys done something like this before? How did you do it?
What might be the best pattern for this scenario?

Thanks a lot for your tips!

2

For a simple light weight solution, my personal preference is to use events and pass the data along with the event.
This allows to communicate independent of the view hierarchy.
Here is a good package :

in the template which is responsible for letting the user select items do this :
EventEmitter.emit(‘itemSelected’, {
data: ‘selectedId’
});

From the template that wants to know what was selected do this :
EventEmitter.on(‘itemSelected’, function(data){
console.log('The item is ', data);
})

There are many other solutions, I don’t think there’s a ‘best’ way to do it. You can store selected item in Session, or a Local Collection, or even the URL, or use a ‘Flux’ pattern. It’s also possible that the parent/child templates can set values on each other directly. My preference is this basic event flow.

1 Like