Drupal 8段落を使用しています。3つのフィールドを含むbanner_header段落があります。
field_active_callout_tab(ブール)
field_banner_header_single(エンティティ参照リビジョン:段落)
field_banner_header_multi(エンティティ参照リビジョン:段落)
2つは次のようにタブに表示されます。
以下は、banner_header段落がコンテンツタイプ編集フォームに表示される方法です。
コンテンツを保存するときに、保存時にアクティブだったタブの段落を使用してページをレンダリングします。
これまでに行ったこと:
フォーム表示の画像に表示されるタブにクラスを追加しました:.single-linkと.multi-link。また、field_active_callout_tabで行った表示動作を管理するためにブールフィールドを作成する必要があると言われました。これが機能するように提案された方法は、選択されているタブに応じてブール値が変化し、ブール値を使用してtwigテンプレートに表示するフィールドを決定できます。このブール値のデフォルトクラスは '.option'のようです。
タブのステータスを確認するカスタムjsファイルを作成しました。
(function($, Drupal) {
/* Add span to wysiwyg button classes for alignment
------------------------------------ */
Drupal.behaviors.calloutControl = {
attach: function (context, settings) {
$('.single-link').click(function () {
$('.option').prop('checked', true);
});
$('.multi-link').click(function () {
$('.option').prop('checked', false);
});
}
};
})(jQuery, Drupal);
そして、ここにbanner_headerテンプレートがあります:
<div class="callout-options">
{% if content.option == true %}
{{ content.field_banner_header_single }}
{% else %}
{{ content.field_banner_header_multi }}
{% endif %}
</div>
Boolはタブの選択に応じて変化しません。まったく影響を受けていないようです。保存時に単一のリンク設定タブが開いているにもかかわらず、ページはマルチリンク段落でのみレンダリングされます。
ブール値は必要ですか?もしそうなら、私は何が欠けていますか?
Boolが必要ない場合、次に何をすればよいですか?
保存時にアクティブだったタブの段落フィールドをページに表示するにはどうすればよいですか?
すぐに目につく3つのこと:
1)フィールドの値を確認する場合は、レンダー配列_{% content.field_whatever %}
_を使用しないでください。これにより、フィールドの値ではなくHTMLマークアップが返されます。ほとんどのフィールドタイプは、_{% entity_type.field_name.0.value %}
_、_{% paragraph.option.0.value %}
_などで確認できます。
2)CSSクラス名とTwig変数名は完全に異なるものです。ブールフィールドのフィールド名(マシン名)はoption
?Drupalデフォルトでは、すべてのフィールドの前に_field_
_が付いているため、名前は_field_whatever
_のようになります。twigでは、_{% if paragraph.field_whatever.0.value %}
_。
3)$('.option')
のようなセレクターは超汎用的であり、ほぼ確実にページ上の他の要素を含みます。私はあなたのテーマを知りませんが、私の管理テーマでは_.option
_がチェックボックスのクラスに含まれていません。 $('input[name*="[field_whatever]"]')
のようなものを使う方が良い
複数回呼び出されていると思います。それを回避するには、以下のように[〜#〜] js [〜#〜]を変更してください
_$(context).find('.single-link').click(function () {
$(context).find('.option').prop('checked', true);
});
$(context).find('.multi-link').click(function () {
$(context).find('.option').prop('checked', false);
});
_
[〜#〜]または[〜#〜]
on click()
イベントをhasClass()
に変更します。これは、アクティブなタブに追加されるクラスになります