トピックリストアイテムのフッターボタン - タイムラインコンテンツ

開発
1

こんにちは！Discourse を使って「タイムライン」コンテンツ概念のコミュニティを構築中です。

Screen Shot 2020-09-21 at 14.56.13
Screen Shot 2020-09-21 at 14.56.13858×878 41.2 KB

「Reply to」と「Share」の両方のボタンはテスト用です。topic-footer-buttons.hbs (#ember) のようなコンポーネントをいくつか変更して作成しました。

<div class="topic-list-item-footer-buttons">
  {{#each inlineButtons as |button|}}
    {{d-button
      class=(concat "btn-default topic-list-item-footer-buttons " button.classNames)
      action=button.action
      icon=button.icon
      translatedLabel=button.label
      translatedTitle=button.title
      translatedAriaLabel=button.ariaLabel
      disabled=button.disabled}}
  {{/each}}
</div>

このコンポーネントを topic-list.hbs の topic-list-item テンプレートの下に挿入すると動作します！しかし、これは将来の Discourse のバージョンアップやプラグインの実装にとって良くありません。そのため、管理画面の「カスタマイズ」→「共通」→「ヘッダー (HTML)」で topic-list-item.raw を変更して操作しようとしています。

<script type="text/x-handlebars" data-template-name="list/topic-list-item.raw">

しかし、別の問題が発生しました。text/x-handlebars テンプレートからコンポーネントを呼び出せないのです。topic-list-item.raw テンプレート内でコンポーネントを呼び出すようなヘルパーやウィジェットのようなものは存在しますか？

私の疑問を根本から解消できるよう、ご支援いただければ幸いです。

2

私が過去にこの問題に対処してきた方法は、HTML ヘルパーにボタンをパッケージ化し、それを生テンプレートで生 HTML としてレンダリングし、その後、生プラグイン outlet 経由で挿入するというものです。以下に例を示します：

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/helpers/preview-helpers.js.es6#L8

ボタンクリックの処理は、topic-list-item コンポーネントで行われます。例：

https://github.com/paviliondev/discourse-topic-previews/blob/master/assets/javascripts/discourse/initializers/preview-edits.js.es6#L332

@merefield 氏も何か考えを持っているかもしれませんね :slight_smile:

また、header.html にスクリプトを追加するのではなく、テーマの JavaScript フォルダ構造を使用することをお勧めします。詳しくは以下をご覧ください：

3

最新のプレビュー編集へのコミットで、そのクリックイベントが削除されたことに気づきました FIX: remove topic list item click event to prevent transition conflict · merefield/discourse-topic-previews-sidecar@6064a59 · GitHub topic-list-item コンポーネントでボタンクリックを処理する方法は現在でも存在しますか？

4

はい、@angus さん、個人的にはもう推奨されません。Ember が少しヒートアップしていたため、TLP から削除しました。トピックタイトル自体にアンカーがあるなど、2 つのクリックイベントが同時に発生すると、ブラウザがページ全体をリフレッシュしてしまいます。これは OPA では明らかに望ましくない動作です。これは複数のユーザーから報告されました。

現時点では、TLP ではタイトル、抜粋、またはサムネイルをクリックする必要があります。

クリック可能な領域は常に 1 つだけであることを確認してください。重なっている場合は問題が発生します。