Using the 'Discourse' javascript class in a hosted forum

Product Support

AI-generated summary

A developer new to Discourse is trying to hook into the Discourse class in a hosted forum using a <script> block in the admin customization section. They are unable to access Discourse.ApplicationView directly, resulting in errors when trying to extend it. simon suggests using the plugin API, referencing the modifyClass and onPageChange functions. garrettboatman confirms that onPageChange works, providing a working example using a <script type="text/discourse-plugin"> block in the </head> customization tab to execute code when the page changes.

1

Hi! Developer fairly new to Discourse here.
I have a hosted forum, so I’m trying to hook into the Discourse class via a <script> block in </body> Customization section of the admin.

I see examples in this forum of application views like Discourse.ApplicationView, Discourse.DiscoveryCategorysView, and Discourse.CloakedView.
However, none of these are available in the Discourse class I see.

The Discourse class I see:

23 PM
23 PM525×453 49.9 KB

–

All I’m trying to do is doSomething() after a new view gets loaded. Like…

Discourse.ApplicationView.reopen({
    didInsertElement: function() {
        this._super();
        doSomething();
    },
    
    pathChanged: function() {
        Ember.run.scheduleOnce('afterRender', this, function() {
            doSomething();
        });
    }.observes('controller.currentPath', 'controller.model')
});

But I get Cannot read property 'reopen' of undefined because Discourse.ApplicationView doesn’t exist.

Any way to access the application view without writing a plugin?

2

You can probably do what you want with the plugin-api. Take a look at this topic: Using the JS API and this file: https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js.es6.

Depending on what you’re trying to do, the modifyClass or onPageChange functions could be useful.

3

@simon - that’s exactly what I needed, thank you!

For future devs:

<script type="text/discourse-plugin" version="0.1">
  api.onPageChange((url, title) => {
    doSomething();
  });
</script>

^^ in the </head> Customize tab.