web-dev-qa-db-fra.com

Passer la variable à drupalSettings

J'utilise Drupal 8.

Ce que j'essaie de faire, c'est:

  • Accéder au nœud actif
  • À partir du nœud, obtenez la valeur de field_test et l'assigner à une variable
  • Passez la variable à la fonction drupalSettings puis à un module personnalisé "mycustommodule" qui déclenche une alerte

Dans mon type de contenu, j'ai créé un field_test champ, qui est le champ auquel je fais référence dans mon code. Le bloc est placé sur une page de ce type de contenu.

C'est le code que j'utilise.

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);

Comment savoir si le fichier JavaScript est en cours de chargement depuis le bloc? J'ai vérifié dans l'inspecteur et je ne le vois pas en cours de chargement lorsque la page avec le bloc dessus se charge.

De plus, comment puis-je accéder correctement à la valeur du champ et la transmettre à JavaScript?

8javascriptblocks
8
lane

Le code ne fonctionne pas car la méthode build() ne retourne rien, ce qui pour PHP est comme retourner NULL. (En d'autres termes, vous disent à Drupal de ne rien rendre.)
Si vous corrigez cela, vous devrez également attacher la bibliothèque à la même variable à laquelle vous attachez les paramètres.

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;
}

Comme note latérale, selon normes de codage Drupal , les noms de classe doivent suivre la dénomination UpperCamel, alias PascalCase .

Quant au code JavaScript, prenez node.js comme guide.

(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);

Les modules Drupal devraient utiliser comportements .

Voir la première et la dernière ligne du code que j'ai copié ici. Votre code JavaScript doit utiliser les mêmes lignes et accéder aux paramètres avec drupalSettings.mycustomblock.test.

9
kiamlaluno