Component with dynamic modules and options - Giving me a headache

I feel like I’m doing something wrong when things become difficult.

I want to make a trade simulator that I can drop self contained buy trigger modules in. The trigger module will include a list of options and a standard function that will return prices that match the options for a date.

I have made a twiddle to make things easier to explain: Twiddle

I’m getting all tied in knots figuring out how to do this. I don’t know how to get the data back from the trigger object or how to call that function from my calculate action. I feel like this breaks the data down, actions up mantra but it seems sensible to contain each trigger in a separate file with it’s calculation code.

So basically it’s a trade-simulator component that has a trigger selection that will have a variable amount of options. The price data and a date will be sent to that trigger which will return a list of valid buys.

First I’d like to know if I’m going about things in the right way. I’m getting stuck and confused so I doubt it.

Hi Joshua,

I’m not too familiar with the requirements exactly. But you can use sendAction and pass in data. I’m trying to understand the Twiddle, but it’s very nested :stuck_out_tongue:. use sendAction and passing arguments to actions. hopefully once you get the gist of it you can get what you need ><

// some-component.js
import Component from '@ember/component';

export default Component.extend({
  actions: {
    save(){
      //this.get('saveAction')();
      let something = "rawr";
      this.sendAction('saveAction', something);
    }
  }
});

// some-template-for-controller-below.hbs
{{some-component
  saveAction=(action 'save')
}}


// some controller.js
import Controller from '@ember/controller';

export default Controller.extend({
  actions: {
    save(something){
      console.log('something: ', something); // rawr

    }
  }
});

// don’t be afraid to use controllers to sync/pass/distribute data among the components. If you do too many mutations in components you risk of having stale data.

reference for passing arguments in components https://guides.emberjs.com/v2.18.0/components/triggering-changes-with-actions/#toc_passing-arguments

Best, Elton

1 Like

Hey, you can read here about passing data up & down in Ember https://emberigniter.com/getting-started-ember-cli-data-down-actions-up-tutorial/

and better than sendAction is closure actions

1 Like

Nice, thanks for the info :smiley:

Thanks a lot for the replies. I have been able to solve my problem using sendAction.

I created a directory with buy modules (Ember objects) which I import as an array of imports. This is rendered as a selection dropdown. The modules contain options such as time frame, minimum price level, etc. Also a standard function which will do a calculation based on those options.

This is sent a subcomponent which handles the rendering of options which would be different for every module. sendAction is used to send the selected module back up to the parent. From there I can use the module’s calculation function to return the data I need based on the options that the user can modify.

I’ve made a component with dynamic modules I can easily add to with separate files.

I wish I could understand closure actions but it’s not sinking in. Oh well, later…

Hey I found a good article one closure actions. I guess you can achieve what you want using both methods, but it’s probably a good idea to learn about closure actions.

https://dockyard.com/blog/2015/10/29/ember-best-practice-stop-bubbling-and-use-closure-actions