Accessing variables in a connector

Dev
1

I’m great at system administration. I’m not bad at doing stuff in rails. With javascript, ember, and CSS,I am just a caveman.

In a plugin that changes who can send PMs, I am trying to add a button to the profile page when the user does not have permission to send a PM. I can add text right where I want it by putting stuff in assets/javascripts/discourse/templates/connectors/user-summary-stat/my-clever-name.hbs. (There was much rejoicing!).

I see that https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/user/messages.hbs#L3 uses

    {{#if showNewPM}}

I’d like to use that in my-clever-name.hbs, but that variable isn’t defined.

I think that maybe I need to create a my-clever-name.js.es6 in the same directory as my hbs file and include . . . something, and/or add some code that defines that variable so that I can access it, but I’ve re-read the developer’s guide a few times as well as tried to mimic code in some plugins that seem like they’re doing the same, but don’t see just how to do that.

2 Likes
2

Hi Jay,

I’ve heard people state EmberJS is “a language in itself”!

What you need is a Computed Property:

Though the Discourse source syntax is a bit different as well as the imports, it’s best to look for an example. Here’s a bit of my code:

https://github.com/paviliondev/discourse-zspace/blob/cc8893c14a9b1c5d4f6552f8f6b12ea9ac7ac643/assets/javascripts/discourse/components/activity-file-edit.js.es6#L10

2 Likes
3

So that @discourseComputied("uploading") makes it so that uploading can be used in an hbs template? Sort of like


fullName: computed('firstName', 'lastName', function() {
    return `${this.firstName} ${this.lastName}`;
  })

would in Ember?

So I’ll create assets/javascripts/discourse/components/my-plugin.js.es6 and extend . . . something . . .? It would seem like there’d be a way that I could just “turn on” those same variables that the other template I’m extending has access to. OH! Maybe extending that thing would in my component make those variables available to me?

Should I punt and back up and spend a week on the Ember tutorial?

4

So this is setting up a computed property called ‘fullName’ which is updated whenever ‘firstName’ or ‘lastName’ change. It becomes the value of the return.

1 Like
5

Thanks for your patience!

I think I get that, what I don’t understand is how I can make values that I can access in my template.

assets/javascript/discourse/components/user-private-messages.js.es6:

import discourseComputed from "discourse-common/utils/decorators";
import User from "discourse/controllers/user";

export default Ember.Component.extend(User, {
    classNames: ["restrict-pms"],
    myFunThing: "this is text in my fun thing",
    @discourseComputed("myvalue")
    someThing(myvalue) {
        return true;
    }
});

Template.registerHelper("log", function(something){
    console.log(something);
});

I think what I’m asking, which might not make sense, is what can I put in assets/javascripts/discoures/templates/connectors/user-profile-controls/add-link-to-subscription.hbs to be able to access myFunThing or myvalue?

6

The template which corresponds to your component js can refer to your computed property simply by including it within double curlies:

{{fullName}}

1 Like
7

The above code is in assets/javascript/discourse/components/user-private-messages.js.es6.

And I want to be able to use {{myFunThing}} and/or {{myvalue}} in assets/javascripts/discourse/templates/connectors/user-profile-controls/add-link-to-subscription.hbs but it’s undefined.

I believe that either one of those files is in the wrong place (I see that other text in the above hbs file is rendered on /u/username/summary, just without myFunThing), or that I’m importing the wrong class and/or I’m extending the wrong component.

8

Sorry jay a bit tied up but what you can do is simply connect to your component in the hbs file within the connector hbs eg:

{{my-component}}

(add arguments as required)

It will then go looking for my-component.hbs in templates/components and /components

Alternately you should be able to set the property in the js file within the connector directory, but for my style I prefer the former approach.

2 Likes
9

I know this is from a year ago, but did you ever get to resolve this, @pfaffman ?

10

I hope that this wasn’t for the same (unfinished) project, but here’s:

https://github.com/pfaffman/discourse-pfaffmanager/blob/master/assets/javascripts/discourse/templates/pfaffmanager-servers-show.hbs

That calls:

https://github.com/pfaffman/discourse-pfaffmanager/blob/master/assets/javascripts/discourse/templates/components/server-item.hbs

And, I think:

https://github.com/pfaffman/discourse-pfaffmanager/blob/master/assets/javascripts/discourse/controllers/pfaffmanager-servers-show-item.js.es6

1 Like