web-dev-qa-db-ja.com

外部jqueryライブラリーの組み込み

Drupal 8でJavascriptを使用しようとしています。公式のdrupal Webサイトから例を取得しました。これは https：/ /www.drupal.org/project/examples およびjs_exampleのコードをsDashboardライブラリを組み込みます。

js_example.libraries.ymlには以下が含まれます：

# A simple script using jquery ui accordion.
js_example.accordion:
  js:
    js/js_example_accordion.js: {}
  # Build up our dependencies for this page as a library. Our accordion script
  # needs jquery.ui.accordion. You can find the core scripts under core/assets/.
  dependencies:
    - core/jquery.ui.accordion
    - core/jquery

js_example.sdashboard:
  js:
    js/jquery-sDashboard.js : {}
  css:
    component:
      css/sDashboard.css: {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.datatables

サンプルモジュールには、次のように変更したコントローラーが含まれています。

public function getJsAccordionImplementation() {
    $title = t('Click sections to expand or collapse:');
    // Build using our theme. This gives us content, which is not a good
    // practice, but which allows us to demonstrate adding JavaScript here.
    $build['myelement'] = array(
      '#theme' => 'js_example_accordion',
      '#title' => $title,
    );
    // Add our script. It is tiny, but this demonstrates how to add it. We pass
    // our module name followed by the internal library name declared in
    // libraries yml file.
    $build['myelement']['#attached']['library'][] = 'js_example/js_example.accordion';
    $build['myelement']['#attached']['library'][] = 'js_example/js_example.sdashboard';
    // Return the renderable array.
    return $build;
  }

そして、sdashboardウィジェットを表示するためのコードを追加したaccordion.html.twigがあります。それは次のように与えられます：

<div class="demo">
<h2>{{  title }}</h2>
<div id="accordion">
  .... accordion here ...
</div>
<ul id="myDashboard"></ul>
<script type="text/javascript" >
  var tdata = [],i;

  for(i=0;i<4*Math.PI;i++){
  tdata.Push([i,Math.sin(i)]);
  }

  var widgetDefinitions = [
  {   widgetTitle:"Plot Example",
      widgetId : "first" ,
      widgetType : "chart" , 
      widgetContent : {
      data : [tdata],
      options : {points:{show:true}}
      }

  }
  ]
  $("#myDashboard").sDashboard({
  dashboardData : widgetDefinitions
  });
</script>

</div>

ここで、例を実行しようとすると、エラーが発生します。

ReferenceError: $ is not defined 
$("#myDashboard").sDashboard({
accordion (line 299, col 3)
ReferenceError: Flotr is not defined
factory($, Flotr);

これはdrupalで外部ライブラリを使用する通常の方法ではありません。 sDashboardなど、必要になる可能性がある他のライブラリを使用するにはどうすればよいですか？

theming8javascript
1
Pant

drupal 8）で外部cdnからjsライブラリを追加しようとしている場合は、テーマ/モジュールのmycustom.libraries.ymlファイルに次のように追加します。

注：タブを押すのではなく、2つのスペースバーを押すボタンで各スペースをインデントしてください。

注：versionはここではオプションです。アドインは必要ないかもしれません。

mycustom.flexslider:
  version: 2.6.3
  css:
    theme:
      //cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.css: {type: external}
  js:
    //cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css: {type: external}
  dependencies:
    - core/jquery

モジュールまたはテーマ内でホストしている場合：

注：ここで、テーマまたはモジュールのベンダーディレクトリ内にflexsliderを配置しました。だから、それはmycustom/vendor/flexsliderの中にあります

mycustom.flexslider:
  version: 2.6.3
  css:
    theme:
      vendor/flexslider/flexslider.css: {}
  js:
    vendor/flexslider/jquery.flexslider-min.js: {}
  dependencies:
    - core/jquery

カスタムjsまたはcssファイルをホストしようとしているだけの場合：

mycustom.myscript:
  js:
    js/script.js: {}

コアjqueryやカスタムライブラリなどの他のライブラリに依存している場合：

mycustom.myscript:
  js:
    js/script.js: {}
  dependencies:
   - core/jquery
   - mycustom.myscript2

次に、サンプルモジュールのようにflexsliderライブラリを追加する必要がある場合：

public function getFlexSliderImplementation() {

    $build['myelement'] = array(
      '#theme' => 'js_flexslider',
    );
    // Add our script. It is tiny, but this demonstrates how to add it. We pass
    // our module name followed by the internal library name declared in
    // libraries yml file.
    $build['myelement']['#attached']['library'][] = 'mycustom/mycustom.flexslider';
    // Return the renderable array.
    return $build;
  }

Update：ダウンロードして、モジュールまたはテーマベンダーディレクトリに Flotr2 を抽出します。 libraries.ymlファイルを変更して、flotr2を含めます

js_example.flotr2:
 js:
   vendor/flotr2/flotr2.min.js : {}

js_example.sdashboard:
  css:
    component:
      vendor/sDashboard/sDashboard.css: {}
  js:
    vendor/sDashboard/jquery-sDashboard.js : {}
  dependencies:
    - core/jquery
    - core/jquery.ui
    - core/jquery.datatables
    - js_example/js_example.flotr2
2
sarathkm