新しいプラグインのアウトレットでトピックを読み込む

開発
2

これで動作するようになりました。目的：新しいテンプレート内の指定された位置に特定のトピックを読み込むこと（既存のテンプレートへの追加にも機能する可能性がありますが、そこは未検証です）。

  1. テンプレートに独自の名前のプラグインアウトレットを挿入します（私の例では「great-topics」という名前にしています）。

{{plugin-outlet name="great-topics"}}

  1. ハンドルバーコード（つまりコンポーネント）をコネクタに追加します。

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.hbs

<div>私はプラグインアウトレット内にあります！トピックを読み込みます：</div>
{{topic-list topics=featuredTopics showPosters=true}}
  1. 新しいコネクタ内のコンポーネント用の JavaScript コードを追加します。

[your-plugin]/assets/javascripts/discourse/connectors/great-topics/new-component.js.es6
[このコードは、タグ「featured」を持つトピックを読み込むコードを含む以下の Meta の投稿を基にしています：https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949]

const ajax = require('discourse/lib/ajax').ajax;
const Topic = require('discourse/models/topic').default;

setupComponent(args, component) {
 ajax("/tag/featured.json").then(function (result) {
                 
   let featuredTopics = [];
   // 空の配列を作成します。ここにトピックを追加していきます

   var featuredUsers = result.users;
   // 関連するユーザーを取得します

   result.topic_list.topics.slice(0, 4).forEach(function (topic) {
   // 0 から 4 までのトピックを抽出しています
   // つまり、合計 3 つを表示します。4 を増やせばもっと表示できます。

     topic.posters.forEach(function (poster) {
        poster.user = $.grep(featuredUsers, function (e) { return e.id == poster.user_id; })[0];
                        });
         // ユーザーをトピックに関連付けます

      featuredTopics.push(Topic.create(topic));
        // 取得したトピックを featuredTopics 配列に追加します
     });
   }) // result.topic.topic_list... の終了
                    
component.set('featuredTopics', featuredTopics);  // ここでトピックがコンポーネントに追加されます
 
component.set("loadingTopics", false); // 上記のコードにはローダーが含まれていませんが、必要であればこちらを設定できます。その場合は hbs ファイルにも追加が必要です。詳細は上記の Meta の投稿をご覧ください

  }); // ajax の終了


 }// setupComponent の終了

これで、新しいテンプレート内のプラグインアウトレットにタグ「featured」を持つトピックを読み込むことが、少なくとも私の環境では動作しています。

この動作を確認するには、サーバーを再起動する必要があります。

「いいね！」 1