Scala.js webloaded jsライブラリが存在しない？

Question

私はscala.jsを使ってプロジェクトをセットアップしました。

ウェブパート（playframework）では、静的ライブラリbxsliderを追加しました。 scala.jsでは、完全な新しいスライダー（div、ulおよびli）を追加します。 scala.jsがなければ、scala.jsを使っても問題ありません。挿入されたコードはスライダーにならないでしょう。 bxSlider（）でスクリプト部分を正しいidに渡そうとしました。無効。私はエラーbxSlider（）関数を取得します。

彼らはbxSliderにアクセスできないようでした。エラーはどこですか？ main.scala.html本で

object WidgetSingleArticleSlider { 

    def articleEntry(x: SharedArticle, addToCartText: String) = { 
    li(
     `class`:="wgsp-item", 
     a(
     href:="#", 
     figure(
      img(src:=x.articleDescription.pictureSeq.headOption.getOrElse(Pictures.emptyPath)) 
     ) 
    ), 
     p(
     `class`:="wgsp-title", 
     a(
      href:="#", 
      x.articleDescription.title 
     ) 
    ), 
     p(
     `class`:="wgsp-price", 
     (if(x.price.articlePrice(1).specialSubTotal.isDefined) 
      x.price.articlePrice(1).specialSubTotal.get.formatted("%,.2f ") 
     else x.price.articlePrice(1).subTotal.formatted("%,.2f ")) + x.price.articlePrice(1).currency 
    ), 
     div(
     `class`:="row no-gutter", 
     div(
      `class`:="col-xs-12 text-center", 
      a(
      `class`:="btn btn-third-col", 
      href:="#", 
      addToCartText 
     ), 
      div(`class`:="gap-30") 
     ) 
    ) 
    ) 
    } 

    def toHtml(title: String, articleSeq: Seq[SharedArticle], addToCartText: String) = { 
    div(
     `class`:="widget wg-specials store-alt box-with-pager mobile-collapse", 
     h3(
     `class`:="wg-title mobile-collapse-header store-alt", 
     title 
    ), 
     div(
     `class`:="wg-body mobile-collapse-body", 
     ul(
      id := "tium", 
      `class`:="vertical-bx-1", 
      articleSeq.map(e => articleEntry(e,addToCartText)) 
     ) 
    ) 
    ) 
    } 

} 

最後に追加される：

<script src="@routes.Assets.versioned("js/jquery-1.11.0.min.js")"></script> 
     <script src="@routes.Assets.versioned("js/jquery-ui-1.10.4.custom.min.js")"></script> 
     @*<script src="@routes.Assets.versioned("plugins/jquery.bxslider.min.js")"></script>*@ 
     <script src="@routes.WebJarAssets.at(webJarAssets.locate("js/jquery.bxslider.js"))"></script> 
     <script src="@routes.Assets.versioned("js/bootstrap.min.js")"></script> 
     <script src="@routes.Assets.versioned("js/jquery-accessibleMegaMenu.js")"></script> 
     <script src="@routes.Assets.versioned("js/jquery.validationEngine.js")"></script> 
     <script src="@routes.Assets.versioned("js/jquery.validationEngine-en.js")"></script> 
     <script src="@routes.Assets.versioned("js/fastclick.js")"></script> <!-- Eliminating the 300ms click delay on mobile browsers --> 
     <script src="@routes.Assets.versioned("js/plugins.js")"></script> 
     <script src="@routes.Assets.versioned("js/scripts.js")"></script> 
     @scalajs.html.scripts("client", routes.Assets.versioned(_).toString, name => getClass.getResource(s"/public/$name") != null) 

この後（動作）要求は、そのされるHTML structurに上記のコードを追加scala.jsにmain.scala.htmlにあります。

今私のscala.jsの追加シーケンス

val child = place.appendChild(Waiting.spinner.render) 
    Ajax.get(url(s"list/article/random?size=$size"),withCredentials = true).map{ xhr => 
     place.removeChild(child) 
     val articleSeq = upickle.default.read[Seq[SharedArticle]](xhr.responseText) 
     val box = WidgetSingleArticleSlider.toHtml(title, articleSeq, addToCartText) 
     place.appendChild(box.render) 
    } 

問題は、この追加コードはbxSliderに変換されていないこと、です。 bxSliderがでWidgetSingleArticleSliderでスクリプトとして追加として、また、私は再びそれを再起動しよう：

$('.vertical-bx-1').bxSlider({ 
     minSlides: 3, 
     slideMargin:0, 
     nextText: '<i class="arrow_carrot-right"></i>', 
     prevText: '<i class="arrow_carrot-left"></i>', 
     pager: false, 
    })); 

結果はまだHTMLのみです。読み込まれたプラグインの結果が未定義になります。見つかっ

<div class="widget wg-specials store-alt box-with-pager mobile-collapse"><h3 
     class="wg-title mobile-collapse-header store-alt">specials</h3> 
    <div class="wg-body mobile-collapse-body"> 
     <ul id="tium" class="vertical-bx-1"> 
      <li class="wgsp-item"><a href="#"> 
       <figure><img src="/thumbnail/width/200/nothing"></figure> 
      </a> 
       <p class="wgsp-title"><a href="#">Wiesenkerbel Saatgut</a></p> 
       <p class="wgsp-price">2.34 EUR</p> 
       <div class="row no-gutter"> 
        <div class="col-xs-12 text-center"><a class="btn btn-third-col" href="#">addToCart</a> 
         <div class="gap-30"></div> 
        </div> 
       </div> 
      </li> 
      <li class="wgsp-item"><a href="#"> 
       <figure><img src="/thumbnail/width/200/nothing"></figure> 
      </a> 
       <p class="wgsp-title"><a href="#">Vogelmiere Saatgut</a></p> 
       <p class="wgsp-price">2.34 EUR</p> 
       <div class="row no-gutter"> 
        <div class="col-xs-12 text-center"><a class="btn btn-third-col" href="#">addToCart</a> 
         <div class="gap-30"></div> 
        </div> 
       </div> 
      </li> 
     </ul> 
    </div> 
    <script> 

     jQuery('#tium').bxSlider(); 

     if (window.jQuery === undefined) window.$ = window.jQuery = jQuery; 

     $(document).ready(function() { 

      $('.vertical-bx-1').bxSlider().reloadSlider(); 

      $('#tium').bxSlider().reloadSlider(); 

      $('.vertical-bx').bxSlider({ 

       minSlides: 3, 

       slideMargin: 0, 

       nextText: '<i class="arrow_carrot-right"></i>', 

       prevText: '<i class="arrow_carrot-left"></i>', 

       pager: false 

      }); 

     }); 

    </script> 
</div> 

Answer 1

ソリューション：

これは、呼び出しの後に追加されたコードです。 scala.jsには問題ありません。jqueryでした。 https://github.com/stevenwanderski/bxslider-4/issues/605

var j = jQuery.noConflict(); 

私は自分のコードに次の行を追加し、すべてがうまく働きました。