コネクタ内の変数へのアクセス

開発
1

システム管理は得意です。Railsでの作業もそこそこできます。しかし、JavaScript、Ember、CSSとなると、私はまさに原始人です。

送信権限を持たないユーザーに対してプロファイルページにボタンを追加するプラグインを作成中です。assets/javascripts/discourse/templates/connectors/user-summary-stat/my-clever-name.hbs にコードを記述することで、希望する場所にテキストを追加できました（大いに喜びました！）。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/user/messages.hbs#L3 には以下のような記述があることに気づきました。

    {{#if showNewPM}}

これを my-clever-name.hbs でも使いたいのですが、その変数が定義されていません。

おそらく、hbs ファイルと同じディレクトリに my-clever-name.js.es6 を作成し、何かを含めるか、あるいはその変数を定義するコードを追加する必要があるのでしょう。開発者ガイドを何度か読み返したり、似たようなことをしているプラグインのコードを模倣してみたりしましたが、具体的な方法がわかりません。

「いいね！」 2
2

こんにちは、Jay さん。

EmberJS は「それ自体が一つの言語だ」と言われているのを聞いたことがあります！

必要なのは計算プロパティです。

Discourse のソースコードでは構文やインポートが少し異なりますが、例を探すのが最善です。以下は私のコードの一部です。

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

「いいね！」 2
3

つまり、@discourseComputed("uploading") を使うことで、uploading を hbs テンプレート内で使用できるようになるのでしょうか？Ember の以下のようなコードと似た仕組みでしょうか。

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

では、assets/javascripts/discourse/components/my-plugin.js.es6 を作成して、何かを拡張する必要があるのでしょうか？拡張している他のテンプレートがアクセスできる変数を、単に「有効化」する方法がありそうな気がします。ああ！もしかして、その「何か」を拡張することで、コンポーネント内でそれらの変数が利用可能になるのでしょうか？

それとも、一度立ち止まって、Ember のチュートリアルを 1 週間かけて勉強し直すべきでしょうか？

4

つまり、これは ‘firstName’ または ‘lastName’ が変更されるたびに更新される ‘fullName’ という計算プロパティを設定しています。戻り値がその値になります。

「いいね！」 1
5

お待たせして申し訳ありません！

その点は理解できましたが、テンプレート内でアクセスできる値をどのように作成すればよいのかがわかりません。

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);
});

私が尋ねているのは（もしかすると意味が通じないかもしれませんが）、myFunThing や myvalue にアクセスするために、assets/javascripts/discoures/templates/connectors/user-profile-controls/add-link-to-subscription.hbs に何を記述すればよいのか、ということです。

6

コンポーネントの JS に対応するテンプレートでは、二重の中括弧で囲むだけで計算済みプロパティを参照できます。

{{fullName}}

「いいね！」 1
7

上記のコードは assets/javascript/discourse/components/user-private-messages.js.es6 にあります。

assets/javascripts/discourse/templates/connectors/user-profile-controls/add-link-to-subscription.hbs で {{myFunThing}} および/または {{myvalue}} を使用したいのですが、これらは未定義です。

これらのファイルのいずれかが誤った場所にある（上記の hbs ファイル内の他のテキストは /u/username/summary でレンダリングされているようですが、myFunThing は含まれていません）、または間違ったクラスをインポートしている、あるいは間違ったコンポーネントを拡張しているのだと思います。

8

ごめんなさい、Jayですぐに返事ができず。できることは、コネクタの hbs ファイル内のコンポーネントの hbs で、単にコンポーネントに接続することです。例えば：

{{my-component}}

（必要に応じて引数を追加）

すると、templates/components および /components 内で my-component.hbs を検索します。

あるいは、コネクタディレクトリ内の JS ファイルでプロパティを設定することもできますが、私のスタイルとしては前者のアプローチを好みます。

「いいね！」 2
9

これは一年前のことですが、@pfaffman さん、この件は解決されましたか？

10

同じ（未完成の）プロジェクト用ではないことを願っていますが、こちらです：

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

これは以下のものを呼び出します：

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

そして、おそらくこちらでしょう：

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

「いいね！」 1