web-dev-qa-db-ja.com

保存時にアクティブだったフィールドをタブに表示するにはどうすればよいですか？

Drupal 8段落を使用しています。3つのフィールドを含むbanner_header段落があります。

field_active_callout_tab（ブール）

field_banner_header_single（エンティティ参照リビジョン：段落）

field_banner_header_multi（エンティティ参照リビジョン：段落）

2つは次のようにタブに表示されます。

paragraph fields set to display in tabs

以下は、banner_header段落がコンテンツタイプ編集フォームに表示される方法です。

single link callout option

multi link callout option

コンテンツを保存するときに、保存時にアクティブだったタブの段落を使用してページをレンダリングします。

これまでに行ったこと：

フォーム表示の画像に表示されるタブにクラスを追加しました：.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はタブの選択に応じて変化しません。まったく影響を受けていないようです。保存時に単一のリンク設定タブが開いているにもかかわらず、ページはマルチリンク段落でのみレンダリングされます。

  1. ブール値は必要ですか？もしそうなら、私は何が欠けていますか？

  2. Boolが必要ない場合、次に何をすればよいですか？

保存時にアクティブだったタブの段落フィールドをページに表示するにはどうすればよいですか？

8themingentitiesjavascriptparagraphs
1
lane

すぐに目につく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]"]')のようなものを使う方が良い

1
Hudri

複数回呼び出されていると思います。それを回避するには、以下のように[〜＃〜] 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()に変更します。これは、アクティブなタブに追加されるクラスになります

1
Razeem Ahmad