# How to Modify Ember Route Class

**URL:** https://meta.discourse.org/t/how-to-modify-ember-route-class/143684
**Category:** Development
**Created:** [March 9, 2020, 11:06am UTC](https://meta.discourse.org/t/how-to-modify-ember-route-class/143684 "2020-03-09T11:06:32Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![saurabhmasc](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@saurabhmasc](https://meta.discourse.org/u/saurabhmasc)
#### Post date: [March 9, 2020, 11:06am UTC](https://meta.discourse.org/t/how-to-modify-ember-route-class/143684/1 "2020-03-09T11:06:32Z")

</div>

Hello All,  
I want to modify the Ember Route class (/app/assets/javascripts/discourse/routes/tags-show.js.es6) in the same way that we modify Controller and Component classes using pluginAPI.  
An example that we modify composer.js.es6 controller as below:

```
<script type="text/discourse-plugin" version="0.8">
  api.modifyClass('controller:composer', {
    actions: {
        newActionHere() { }
   }
});
</script>

```

Is it possible to modify the Ember Route class in the same way?

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [March 9, 2020, 1:27pm UTC](https://meta.discourse.org/t/how-to-modify-ember-route-class/143684/2 "2020-03-09T13:27:14Z")

</div>

I believe this is possible — I think it works via `route:route-name`. Have you given it a try?

---

<div class="post-metadata">

### Author: ![saurabhmasc](https://avatars.discourse-cdn.com/v4/letter/s/4bbf92/32.png) [@saurabhmasc](https://meta.discourse.org/u/saurabhmasc)
#### Post date: [March 9, 2020, 2:16pm UTC](https://meta.discourse.org/t/how-to-modify-ember-route-class/143684/3 "2020-03-09T14:16:32Z")

</div>

**route:route-name** working but when I try to override action **createTopic** as shown below:

```
<script type="text/discourse-plugin" version="0.8">
  api.modifyClass('route:tags-show', {
    actions: {
     createTopic() {
      const controller = this.controllerFor("tags.show");

      if (controller.get("list.draft")) {
        this.openTopicDraft(controller.get("list"));
      } else {
        this.controllerFor("composer")
          .open({
            categoryId: controller.get("category.id"),
            action: Composer.CREATE_TOPIC,
            draftKey: controller.get("list.draft_key"),
            draftSequence: controller.get("list.draft_sequence")
          })
          .then(() => {
            // Pre-fill the tags input field
            if (controller.get("model.id")) {
              const composerModel = this.controllerFor("composer").get("model");

              composerModel.set(
                "tags",
                _.compact(
                  _.flatten([
                    controller.get("model.id"),
                    controller.get("additionalTags")
                  ])
                )
              );
            }
          });
      }
    }
}
 });
</script>   

```

It throws Error :  
`ReferenceError: Composer is not defined`

 ![ComposerNotDefined](https://global.discourse-cdn.com/meta/original/3X/3/8/38cfcd41a7568b07b22e16e0be076e9050652cbf.png)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [March 10, 2020, 10:12pm UTC](https://meta.discourse.org/t/how-to-modify-ember-route-class/143684/4 "2020-03-10T22:12:09Z")

</div>

> [@saurabhmasc](#):
>
> ReferenceError: Composer is not defined

This happens because `Composer` is not defined in your code. If you look at the `tags-show` route, you’ll see that `Composer` is defined at the top.

[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/routes/tags-show.js.es6#L2](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/routes/tags-show.js.es6#L2)

However, since you’re doing this in theme script tags, you can’t use `import`. You’ll have to use `require` instead.

So, it should work if you add something like this to the top of your code

```plaintext
const Composer = require("discourse/models/composer");

```

That said, I strongly recommend that you spend a bit of time reading

> [@Split up theme Javascript into multiple files](https://meta.discourse.org/t/splitting-up-theme-javascript-into-multiple-files/119369):
>
> Complex theme javascript can be split into multiple files, to keep things nicely organised. To use this functionality, simply add files to the /javascripts folder in your theme directory. These files can not be edited from the Discourse UI, so you must use the [Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950) or [source the theme from git](https://meta.discourse.org/t/how-to-source-a-theme-from-a-private-git-repository/82584). Javascript files are treated exactly the same as they are in core/plugins, so you should follow the same file/folder structure. Theme files are loaded after core/plugins, so if the filenames match,…

and experimenting with this new way of creating themes. It’s much easier to follow examples in core that way.