Component with dynamic modules and options - Giving me a headache

Ember CLI
1

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.

2

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

Best, Elton

1 Like
3

Hey, you can read here about passing data up & down in Ember

and better than sendAction is closure actions

1 Like
4

Nice, thanks for the info :smiley:

5

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…

6

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