Discourse 2.3 で導入されるこの新しい API を使えば、ロジックを重複させることなく、トピックの下部にインラインボタンとして、または {{topic-footer-mobile-dropdown}} にボタンを追加できます。
使い方
api.registerTopicFooterButton({
// ボタンの ID（必須）
id: null,
// ボタンに表示されるアイコン
icon: null,
// title 属性のローカルキーパス
title: null,
// 既に翻訳済みのタイトル
translatedTitle: null,
// ラベルのローカルキーパス
label: null,
// 既に翻訳済みのラベル
translatedLabel: null,
// このボタンをモバイル用ドロップダウンに表示するか、インラインボタンとして表示するか？
dropdown: false,
// ボタンに付与される CSS クラス
classNames: [],
// ボタンの状態更新を強制する計算プロパティ
// 例: ["topic.bookmarked", "topic.category_id"]
dependentKeys: [],
// このボタンを表示するか？
displayed: true,
// このボタンを無効にするか？
disabled: false,
// 表示順序（数値が高いほど優先）
priority: 0
}
});
id を除くすべてのキーは、値または関数のいずれかに設定できます。
icon: "user"
icon() {
// ここは topic-footer-buttons コンポーネントのコンテキストです
// 例として、トピックモデルや this.site にアクセスできます
return this.get("topic.some_icon_variable");
}
dependentKeys について
dependentKeys は、ボタンを構築するために必要なすべての計算プロパティと考えることができます。これらのキーのいずれかが変更されると、ボタンは再レンダリングされます。基本的に、ボタンを定義する際に this.get("something") を行う場合は、something を dependentKeys に含める必要があります。
dropdown について
dropdown キーを使用すると、ボタンをインラインに追加するか、{{topic-footer-mobile-dropdown}} に追加するかを定義できます。
例えば、デスクトップではインラインにボタンを作成し、モバイルではドロップダウンに追加する実装は、以下のように動作します。
dropdown() { return this.site.mobileView; }
注：現時点では、ドロップダウンはモバイルでのみ表示されます。したがって、これはドロップダウンに決して表示したくない場合や、モバイル表示を表示する際に特定のケースでデスクトップ表示を強制したい場合に最も有用です。