Best way to update route variable from Component

Questions
1

Hi guys, first time posting.

I find myself in a situation where a parent route has a <div> element that has a CSS class which causes problems for me.

I intend to ‘switch off’ that class when my component is rendered because it isn’t relevant to my component, although it is relevant everywhere else.

To do this, I was planning on binding the div class to a route.js property. When the route is a certain route (the route with my component in) then switch of or change the class of the parent div.

What’s the best way to do that? Is that breaking a best practice rule? It sounds a bit bodgey.

How would YOU do it?

Thanks

EDIT:

bit more detail: the div class restricts the width of everything inside it. My component is in a child route and is rendered inside it. But I need to be able to make a div take up the entire width, unrestricted.

2

It’s not really crazy, though I can’t say for sure without better understanding the use case. In real world apps you tend to run into things that may not be “ideal” design but aren’t necessarily “bad” design either. The first solution that comes to mind is to bind the css class to a property on a service, and et the component (or child route) change that property. You could also probably do it with actions and/or controllerFor in the child controller but I think a service might be a little cleaner. Again though this is based on my very abstract understanding of the problem.

3

Cheers I’ll probably look at this more tomorrow. Added some more detail but I’ll keep service in mind.

4

Unfortunately couldn’t get this approach to work. javascript - Ember: how to bind HTML class to Service property, so that class is dynamic - Stack Overflow

5

You’d want to do the binding in your controller. Something like:

// parent-controller.js
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';

export default Controller.extend({
  dashboardContainerManager: service(),
});

and in your template:

<div class={{dashboardContainerManager.dashboardContainerClass}}>

The way you were setting it on your model was doing a one-time set, not binding it dynamically. A side benefit of this approach with the controller is that you can keep your route clear of any of this (it’s presentation logic) and it’s a little shorter and cleaner.

2 Likes
6

Cheers mate I got a similar answer from a lad on Stackoverflow.

Appreciate it. I’ve got other issues now but unfortunately running into glimmer errors when i try inject and alter the service in my child component.

weird but I think it’s a separate issue since this seems universally accepted as a working solution. Thanks