Best place for commonly used functions

Im wondering, where to put commonly used parameters and computed values into. These parts of my application should be accessable from different lacations. They should get called from the frontend (templates) via helpers or something as well get used within components (the JS-Part).

As an simple example (which may not be necessarily a good example for that requirement), ive got the following use case: I want to be able, to get a specific css class name in my templates, regardless to the surrounding tag or place (div, h1, … ) from where im calling that mechanism. Also I want to pass some arguments (lets say a number as an id) to this function.

Routes-Template

...
<h1 class="{{getSpecialDesignCSSClassName arg1=4}}"> Header </h1>
...

or one more example

...
<div class="{{getSpecialDesignCSSClassName arg1=model.categoryType}}">
  Header
</div>
...

That should result in something like that

...
<h1 class="greenTheme"> Header </h1>
...

or

...
<div class="purpleTheme">
  Header
</div>
...

The function should look something like that:

switch(arg1) {
  case 4:
    return "greenTheme"
  ...
  default:
    return "purpleTheme"

}

As I mentioned before: This might not a proper usecase for a requirement I described at the beginning. But this is here just for making clear what Iam going to realise or more precisely I want to know how to solve in general (when common logic should be reusable, generic with parameters and easely accessable).

So what would you guys do?

I usually put reusable methods in a app/utils folder. But in your case you’ll also want to wrap that utility function in a helper.

Thanks jason, do you thing you could give me a short example of what you mean by that?

1 Like

Thank you sooo much!

Just one more thing: Is it good practice to place Vanilla-JS-Function into app/utils and call it with ember? Specialy to be future-proof (Ember 2.0)

This is a common practice, I don’t see anything wrong with it.