Ember Route - Access to DOM


#1

Hey guys im fairly new to Ember and I found a plugin that makes an action inside a route usable from the template. I was using the action in the route to modify the DOM through a bootstrap component. ie $('.nav-tabs li.tab:not(.active)').tab('show'); but was told that the Route should not have access to the DOM, but they werent able to tell me why. Is there any particular reason why the route should not be able to access the DOM? The whole idea behind it is to not use a Controller and not use a component for something so basic, which is what I think will end up happening

Regards, Carlos V


#2

Could you name this plugin


#3

Sure. Say another programmer inherits your project and found the tab mysteriously show/hide. He’s scratching his head…what is this black magic? The template has nothing. It’s not in any components either. He spent the 2 whole days trying to figure things out and eventually found it in the route.

Following strict pattern is not about you, it’s about the team that has collective ownership over the project. Just remember, the programmer that’s scratching his head could be you too…3 months later.


#4

The action is called via a helper called route-action, If someone sees that they can clearly know that the action is in the route.

Here is the link to it.


#5

Separation of concerns.

The route is for fetching the model, setting up the controller, and rendering the template that backs the route. Mutating the state of the DOM here doesn’t make much sense in it’s current responsibility. Instead, you’re looking for some ephemeral state change that propagates down to, or be handled by, a component. That change would then be scheduled and synced with the DOM. This makes testing a bit easier and it’s also understood by future/present travelers of the codebase.


#6

That’s exactly what I was looking for! I’ll just make everything part of the component. Thanks!