# Share code between routes **URL:** \ **Category:** Learning Team\ **Created:** [July 11, 2017, 2:57pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260 "2017-07-11T14:57:03Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![emanuk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/emanuk/32/13198_2.png) [@emanuk](https://discuss.emberjs.com/u/emanuk)\ **Post date:** [July 11, 2017, 2:57pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/1 "2017-07-11T14:57:03Z")
ember-cli: 2.13.2 node: 7.8.0 Hello, I’m a newbie at Ember. I have a route with this code to set a body class. I will use this code on a couple of routes but not all. I was wondering if it’s possible to share this code between routes? TIA -Emmanuel ``` import Ember from 'ember'; export default Ember.Route.extend({ activate () { Ember.$('body').addClass('loading-authentification'); }, deactivate () { Ember.$('body').removeClass('loading-authentification'); } }); ``` ---
**Author:** ![CezaryH](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/cezaryh/32/13527_2.png) [@CezaryH](https://discuss.emberjs.com/u/CezaryH)\ **Post date:** [July 11, 2017, 3:05pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/2 "2017-07-11T15:05:25Z")
yes, use mixins > **[Ember.Mixin - 2.14 - Ember API Documentation](https://api.emberjs.com/ember/2.14.0/classes/Ember.Mixin)** > > The Ember.Mixin class allows you to create mixins, whose properties can be added to other classes. For instance, ---
**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\ **Post date:** [July 12, 2017, 3:39am UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/3 "2017-07-12T03:39:23Z")
Mixins are largely an anti-pattern now. Make sure you understand exactly how Ember’s mixin works and how the order that you mix these mixins actually results in different behavior. On the larger perspective, it’s always good to know the inner working of Ember’s object model. Namely how all these works: `.reopen`, `.reopenClass`, `.extend`, `Ember.mixin` (lower case mixin). ---
**Author:** ![nerdyworm](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/nerdyworm/32/3860_2.png) [@nerdyworm](https://discuss.emberjs.com/u/nerdyworm)\ **Post date:** [July 12, 2017, 3:06pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/4 "2017-07-12T15:06:17Z")
> [@lightblade](#): > > Mixins are largely an anti-pattern now. Hate to thread jack, but could you point to some resources about this? ---
**Author:** ![emanuk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/emanuk/32/13198_2.png) [@emanuk](https://discuss.emberjs.com/u/emanuk)\ **Post date:** [July 12, 2017, 10:10pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/5 "2017-07-12T22:10:35Z")
Hello, thanks for the answers! But, I’m really stuck here. Although I googled a lot, read all documentation that I can find, I can’t find a way to do this. I tried with mixin, reopen and reopenClass. I think I understand how to create a mixins/reopen/reopenClass but I can’t figure out how to put it in the route under activate/deactivate. TIA ---
**Author:** ![emanuk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/emanuk/32/13198_2.png) [@emanuk](https://discuss.emberjs.com/u/emanuk)\ **Post date:** [July 13, 2017, 12:26am UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/6 "2017-07-13T00:26:51Z")
Ok I’m almost there: In ./app.js I have set the import of the reopen file: `import SetBodyClass from './custom/css/set_body_class'` In ./custom/css/set\_body\_class.js I have the following code: ``` Ember.Route.reopen({ set_body_class(this_class){ console.log (this_class); alert(this_class); return Ember.$('body').addClass(this_class); } }) ``` Then in /routes/authentification.js I have this: ``` import Ember from 'ember'; export default Ember.Route.extend({ activate () { this.set_body_class('red'); }, deactivate () { this.set_body_class('blue'); } }); ``` Although console.log() and alert() are working in the route it seems that jQuery is not working and I can’t change the body class of the page. TIA ---
**Author:** ![emanuk](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/emanuk/32/13198_2.png) [@emanuk](https://discuss.emberjs.com/u/emanuk)\ **Post date:** [July 13, 2017, 12:49am UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/7 "2017-07-13T00:49:36Z")
Holycow it’s working now! I forgot to change the name of the css class. routes/authentification.js ``` import Ember from 'ember'; export default Ember.Route.extend({ activate () { this.set_body_class('loading-authentification'); } }); ``` ./custom/css/set\_body\_class.js ``` Ember.Route.reopen({ set_body_class(this_class){ return Ember.$('body').addClass(this_class); } }) ``` ---
**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\ **Post date:** [July 13, 2017, 4:43am UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/8 "2017-07-13T04:43:13Z")
I talked about the issues of Mixins before on this forum. You can see it [here](https://discuss.emberjs.com/t/is-mixin-dead-yet/11768) If you’re on Ember Community slack channel, you can do a search on mixin and you’ll get many opinions about it, many are negative. ---
**Author:** ![James-Byrne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/james-byrne/32/17391_2.png) [@James-Byrne](https://discuss.emberjs.com/u/James-Byrne)\ **Post date:** [July 13, 2017, 4:59pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/9 "2017-07-13T16:59:17Z")
What would you use the place of the mixin here? A service is the first thing that pops into my mind but that seems overkill for this. You could use an exported class or a simple function either but they don’t feel right compared to the mixin which is built into the framework. ---
**Author:** ![lightblade](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/lightblade/32/15632_2.png) [@lightblade](https://discuss.emberjs.com/u/lightblade)\ **Post date:** [July 13, 2017, 6:41pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/10 "2017-07-13T18:41:57Z")
Well, a service is not hooked into the render cycle of the route. OP’s use case is route specific. It is perfectly ok to encapsulate this in a helper or component. I think component works better because it has a teardown phase. Just make component that attach class to body on insert, then remove the class on teardown. ---
**Author:** ![James-Byrne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/james-byrne/32/17391_2.png) [@James-Byrne](https://discuss.emberjs.com/u/James-Byrne)\ **Post date:** [July 14, 2017, 11:40am UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/11 "2017-07-14T11:40:32Z")
Fair point but a component comes with a lot more cognitive overhead than a mixin (not to mention number of files). Most Mixins should only describe a simple self contained behaviour or action but don’t necessarily have lifecycles themselves or work with the DOM. In that case does a mixin or classical inheritance not make more sense than a component? ---
**Author:** ![technomage](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/technomage/32/10252_2.png) [@technomage](https://discuss.emberjs.com/u/technomage)\ **Post date:** [July 15, 2017, 8:29pm UTC](https://discuss.emberjs.com/t/share-code-between-routes/13260/12 "2017-07-15T20:29:14Z")
Rather than using imperative logic to set a body style, you can also add that to the template and use data mapping from a property to set the class. In particular if this is for navigation the link-to can be used to set the style if the url matches the target of the link-to which allows easy management of the navigation links common in web ui and bootstrap in particular.