saurabhmasc
(Saurabh Khandelwal)
March 9, 2020, 11:06am
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?
justin
(Justin DiRose)
March 9, 2020, 1:27pm
2
I believe this is possible — I think it works via route:route-name
. Have you given it a try?
saurabhmasc
(Saurabh Khandelwal)
March 9, 2020, 2:16pm
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
Johani
(Joe)
March 10, 2020, 10:12pm
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
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. Currently, these files can not be edited from the Discourse UI, so you must use the Theme CLI or source the theme from git .
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 filen…
and experimenting with this new way of creating themes. It’s much easier to follow examples in core that way.
5 Likes