Drupal 8.を使用しています。
私がやろうとしていることは:
field_test
の値を取得し、変数に割り当てます私のコンテンツタイプでは、コードで参照するフィールドであるfield_test
フィールドを作成しました。ブロックは、このコンテンツタイプのページに配置されます。
これは私が使用しているコードです。
custom:
version: 1.x
js:
js/custom.js: {}
dependencies:
- core/jquery
- core/drupalSettings
<?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;
}
}
(function ($, Drupal, drupalSettings) {
var testMe = Drupal.settings.mycustomblock.test;
alert(testMe);
)(jQuery, drupalSettings);
JavaScriptファイルがブロックからロードされているかどうかを確認するにはどうすればよいですか?インスペクタをチェックインしましたが、ブロックのあるページが読み込まれたときに読み込まれていません。
さらに、フィールド値に適切にアクセスしてJavaScriptに渡すにはどうすればよいですか?
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
を使用して設定にアクセスする必要があります。