Question

我正在尝试开发我的第一个drupal 8模块，我无法理解为什么在我的twig模板中未定义jQuery。

在我的块中，我调用控制器功能：

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' 
            ),
        ),
    );
}

最后在twig我有这样的脚本代码：

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

当然我收到一个错误：＆＃34;未捕获的ReferenceError：未定义jQuery＆＃34;因为所有的抄写都包含在页面的底部。

我找不到脚本的功能，可以帮助我在页面底部显示我的脚本代码。我无法在js文件中编写此代码，因为脚本中的params可能会发生变化。我可以从隐藏的输入中读取参数但我认为在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
      });
  }
};

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

1 个答案: