How to Modify Ember Route Class

dev
1

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?

2

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

3

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
ComposerNotDefined1242×323 28.1 KB

4

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

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

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

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

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

5 Likes