Topic List Item のスタイル属性を動的に変更

開発
1

Disclaimer: 方向性には大変満足しており、これまでの皆様の尽力に感謝いたします。新しいシステムには多くの可能性があります。ただ、同等の機能が維持されるようにする必要があります。

私のコンポーネントであるTLPでは、現在、トピックリストアイテムの外側のタグのスタイル属性を動的に設定しています。

  • 画像の主要な色に合わせてbackground:の色を固有のRGB値に設定します。これは理想的にはEmberループで行われるべきです。

また、メーソンリー要素のサイズを非常に迅速に決定するためにgrid-row-endを設定しています。これは非常に高速で効率的であり、多くのJavaScriptを回避します。しかし、これにはJavaScriptを使用しています。DOMでの最終的なサイズに依存するためです。

現在、これらは問題なく共存しています。

image

<tr style="background: rgb(56, 10, 58); grid-row-end: span 48;" data-topic-id="23321" id="ember168" class="topic-list-item category-uncategorized tag-inforunners visited white-text has-thumbnail tiles-grid-item ember-view" data-is-last-viewed-topic="true">

これらはどちらもテーマコンポーネントにとって重要なカスタマイズであり、これらなしではサポートできません。

この最初のスタイル修正は、現在、非推奨のメソッドであると理解している直接のスタイル属性バインディングとmodifyClassを使用して実現されています。

新しい環境でこれを行うためのAPIはありますでしょうか？

あるいは、既存の方法を見落としているでしょうか？

しかし、これはクラスでは達成できないことだと考えています。

「いいね！」 3
2

そうですか？ :confused: ネイティブクラス構文に更新するだけではないのですか？

3

これに従っています

「いいね！」 1
4

ああ、そうなんですね。このアップグレードのことだと思っていました。

「いいね！」 1
5

明確にすることが望ましいです。

  • modifyClass はまだ有効ですか？ (構文が更新されたばかりなので、もしそうなら、そのガイドを参照するのが良いかもしれません)
  • それを使って、囲んでいるタグのスタイル属性にアクセスできますか？

クラシックコンポーネントは、テンプレート外の囲んでいるタグレベルの属性へのアクセスを歴史的に提供していたため、コードで動的に変更するのが簡単だったという点で異なります。

「いいね！」 1
6

ああ、そうですね。コンソールに非推奨の通知があります。

非推奨通知: ‘component:topic-list-item’ を ‘modifyClass’ で変更することは非推奨です。代わりに値トランスフォーマー ‘topic-list-columns’ およびその他の新しい topic-list プラグイン API を使用してください。

「いいね！」 1
7

modifyClass 自体は非推奨ではありません。これはリスクの高いカスタマイズ方法であり、使用する際は（@don がリンクしたドキュメントに記載されているように）注意が必要です。しかし、削除する予定は今のところありません。

component:topic-list および component:topic-list-items に対して非推奨メッセージを表示しているのは、これらがトピックリストのレガシー実装であり、glimmer トピックリストが有効になっている場合には使用されないためです。現在では、components/topic-list/item のような glimmer コンポーネントのセットがあります。

したがって、技術的にはこれらの新しいコンポーネントで modifyClass を使用できます。しかし、これらは glimmer コンポーネントであるため、JS クラス経由でスタイルタグを変更することはできません。そのため、OP の問題の解決には役立ちません。

公式の d-topic-thumbnails テーマコンポーネントには同様の「マソンリー」モードがあり、その実装方法を確認する価値があります。トピックリストの各「行」に一意のクラスを追加しています。

次に、別の plugin-outlet で動的な <style> タグをレンダリングし、それらのクラス名をターゲットにします。

とはいえ…これは少し複雑なので、style= 属性を変更できるように、特定の valueTransformer を追加することを検討すべきかもしれません。Ember の xss/htmlSafe 保護がこの属性にかかっているため、少しトリッキーですが…何か動作するものを見つけられるはずです。

「いいね！」 3
8

Davidさん、ご検討いただきありがとうございます。ぜひお願いします！

9

デイビッド、新しいAPI経由でGlimmerイベント（didInsert、didUpdate、willDestroyなど）にフックすることは可能ですか？

例えば、didInsertで追加のJavaScriptを実行したいのですが、これは現在@onとmodifyClassで処理されています。

（これは新しいトピックにしても構いません）

とりあえず、こちらのテクニックを試してみます。

「いいね！」 1
10

特定の場所に特定のトランスフォーマーを導入することは可能です。しかし、あらゆる要素/コンポーネントにアタッチできる一般的なAPIを追加することは考えていません。

style=属性の議論については、このPRを作成しました。レビュー/マージされるように努めます。

「いいね！」 3
11

ありがとうございます。今のところ、あなたの現在のテクニックでうまくいっています。TLPに合わせて調整したところ、うまく機能しているようです。他に潜在的なギャップが見つかった場合は、元に戻します。

素晴らしい！それがマージされる頃には準備ができているはずです。楽しみにしています！デビッド、ありがとう！

「いいね！」 3
12

うまくいきました。ありがとうございました！ :rocket:

「いいね！」 2
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.