Trouble with accessing another viewmodel's functions

Help Requests
1

I have found myself in a situation where i have broken up this complicated page into a number of customElements. However, one of those customElement’s viewmodel has a function that another viewmodel needs.

How do I use that viewmodel’s function to calculate a set of values in this other customElement? I tried adding function’s viewmodel.ref onto the customElement’s template but had little success.

Its not clear how to share bits of code across individual components/customElements… Can someone outline the normal way you might share a bit of code, say a function and variables etc

Would appreciate some insight… Cheers Simon

1 Like
2

Ok think I have this… bit of slog trying to get it to work in Typescript but success. I used THIS blog by Dustin Davis to wire up a shared typescript file and was able to access the variables inside that file.

1 Like
3

You have a couple of options depending on need for sharing component state / functions but it sounds in your situation you should be abstracting that function into its own component and just import it when you need it in each component.

export function someFunc(someVar) {
    return someVar.toLowerCase();
};
...
import { someFunc } from 'app/some/path/some-func';

Otherwise these are all options for sharing state/events/data between disconnected components.

  1. Use the EventAggregator
  2. A singleton class as mentioned in that blog to store and keep state data and pass events around
  3. Rxjs / Aurelia Store to track state and send events between components
1 Like
4

Thankyou will be exploring those options today… Simon

1 Like
5

There are more options but it depends on how much you want to reuse these custom components and what communication needs to pass between the components.