web-dev-qa-db-ja.com

変数をdrupalSettingsに渡します

Drupal 8.を使用しています。

私がやろうとしていることは：

  • アクティブノードにアクセスする
  • ノードからfield_testの値を取得し、変数に割り当てます
  • 変数をdrupalSettings関数に渡し、続いてアラートをトリガーするカスタムモジュール 'mycustommodule'に渡します

私のコンテンツタイプでは、コードで参照するフィールドであるfield_testフィールドを作成しました。ブロックは、このコンテンツタイプのページに配置されます。

これは私が使用しているコードです。

mycustomblock.libraries.yml

custom:
  version: 1.x
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/drupalSettings

MyCustomBlock.php

<?php
/**
 * @file
 *
 */

namespace Drupal\mycustomblock\Plugin\Block;
use Drupal\Core\Block\BlockBase;

/**
 * Creates a 'Foobar' Block
 *
 * @Block(
 * id = "block_mycustomblock",
 * admin_label = @Translation("MyCustomBlock"),
 * category = @Translation("Blocks")
 * )
 */
class MyCustomBlock extends BlockBase {
  /**
   * {@inheritdoc}
   */

  public function build() {

  // get the variable from field_test
  if ($node = \Drupal::routeMatch()->getParameter('node')) {
      $test = $node->field_test->value;
      $variables['#attached']['library'][] = 'mycustomblock/custom'; 
      $build['#attached']['drupalSettings']['mycustomblock']['test'] = $test;
    }
}

custom.js

(function ($, Drupal, drupalSettings) {
  var testMe = Drupal.settings.mycustomblock.test;
  alert(testMe);
)(jQuery, drupalSettings);

JavaScriptファイルがブロックからロードされているかどうかを確認するにはどうすればよいですか？インスペクタをチェックインしましたが、ブロックのあるページが読み込まれたときに読み込まれていません。

さらに、フィールド値に適切にアクセスしてJavaScriptに渡すにはどうすればよいですか？

8javascriptblocks
8
lane

build()メソッドは何も返さないため、コードは機能しません。これは、PHPの場合、NULLを返すようなものです（つまり、 Drupal何もレンダリングしないように指示しています。）
それを修正する場合、設定をアタッチするのと同じ変数にライブラリをアタッチする必要もあります。

public function build() {
  $build = [];
  // get the variable from field_test
  if ($node = \Drupal::routeMatch()->getParameter('node')) {
    $build['#attached']['library'][] = 'mycustomblock/custom'; 
    $build['#attached']['drupalSettings']['mycustomblock']['test'] = $node->field_test->value;
  }

  return $build;
}

補足として、 Drupalコーディング標準 に従って、クラス名は、UpperCamelの命名、別名 PascalCase に従う必要があります。

JavaScriptコードについては、ガイドとして node.js を使用してください。

(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.nodeDetailsSummaries = {
    attach: function attach(context) {
      var $context = $(context);

      $context.find('.node-form-author').drupalSetSummary(function (context) {
        var $authorContext = $(context);
        var name = $authorContext.find('.field--name-uid input').val();
        var date = $authorContext.find('.field--name-created input').val();

        if (name && date) {
          return Drupal.t('By @name on @date', { '@name': name, '@date': date });
        } else if (name) {
          return Drupal.t('By @name', { '@name': name });
        } else if (date) {
          return Drupal.t('Authored on @date', { '@date': date });
        }
      });

      $context.find('.node-form-options').drupalSetSummary(function (context) {
        var $optionsContext = $(context);
        var vals = [];

        if ($optionsContext.find('input').is(':checked')) {
          $optionsContext.find('input:checked').next('label').each(function () {
            vals.Push(Drupal.checkPlain($.trim($(this).text())));
          });
          return vals.join(', ');
        }

        return Drupal.t('Not promoted');
      });
    }
  };
})(jQuery, Drupal, drupalSettings);

Drupalモジュールは behaviors を使用する必要があります。

ここにコピーしたコードの最初と最後の行をご覧ください。 JavaScriptコードは同じ行を使用し、drupalSettings.mycustomblock.testを使用して設定にアクセスする必要があります。

9
kiamlaluno