Drupal 8 jQuery 在模块树枝视图中未定义

Question

我正在尝试开发我的第一个 Drupal 8 模块，但我不明白为什么 jQuery 在我的 twig 模板中未定义。

在我的代码块中，我调用了控制器函数：

public function build() {
    $config = $this->getConfiguration();
    $slider = new OsTouchController;

    return $slider->displaySlider($config['id']);    
}

然后在控制器中：

public function displaySlider($slider_id) {
    $oss_params = $this->getSliderParams($slider_id);
    return array(
      '#theme' => 'slider_default',
      '#oss_params' => $oss_params,
      '#attached' => array(
            'library' =>  array(
                'ostouch_slider/ostouch.slider' 
            ),
        ),
    );
}

最后在树枝上我有这样的脚本代码：

jQuery(document).ready(function($) {
      var mySliderSetings = new osSliderSettings("#dragable-settings-block",{
        crop :                        {{ oss_params.crop_image }},
        parallax :                    {{ oss_params.parallax }},
        imageWidth:                   {{ oss_params.image_width }},
        imageHeight:                  {{ oss_params.image_height }},
        site_path :                   '{{ "http://" }}',
        moduleId :                    {{ oss_params.modId }},
        lazyLoading :                 {{ oss_params.lazyLoading }},
        lazyLoadingInPrevNext :       {{ oss_params.lazyLoadingInPrevNext }},
        lazyLoadingInPrevNextAmount : {{ oss_params.lazyLoadingInPrevNextAmount }},
        textOrdering:                 {{ oss_params.textOrdering }},
        screenW :                     screenW,
        screenH :                     screenH,
        setupAnimation :              setupAnimation,
        swiperSlider :                mySwiper
      });
    });

当然我得到一个错误：

"Uncaught ReferenceError: jQuery is not defined"

因为包含的所有脚本都在页面底部。

我找不到可以帮助我在页面底部显示脚本代码的脚本函数。 我无法在 js 文件中编写此代码，因为脚本中的参数可以更改。 我可以从隐藏的输入中读取参数，但我认为在 Drupal 中存在另一种方式......

谁能帮帮我？我做错了什么？

Answer 1

使用 Drupal.behaviors 而不是 document.ready。阅读它HERE。

例如。

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
      var mySliderSetings = new osSliderSettings("#dragable-settings-block",{
        crop :                        {{ oss_params.crop_image }},
        parallax :                    {{ oss_params.parallax }},
        imageWidth:                   {{ oss_params.image_width }},
        imageHeight:                  {{ oss_params.image_height }},
        site_path :                   '{{ "http://" }}',
        moduleId :                    {{ oss_params.modId }},
        lazyLoading :                 {{ oss_params.lazyLoading }},
        lazyLoadingInPrevNext :       {{ oss_params.lazyLoadingInPrevNext }},
        lazyLoadingInPrevNextAmount : {{ oss_params.lazyLoadingInPrevNextAmount }},
        textOrdering:                 {{ oss_params.textOrdering }},
        screenW :                     screenW,
        screenH :                     screenH,
        setupAnimation :              setupAnimation,
        swiperSlider :                mySwiper
      });
  }
};