Scala.js webloaded js库不存在？

Question

我使用scala.js设置了一个项目。

在网页部分（playframework），我添加了一个静态库bxslider。 使用scala.js我添加了一个完整的新滑块（div，ul和li）。没有scala.js所有的工作正常，与scala.js插入的代码不会是一个滑块。 我试图将bxSlider（）的脚本部件传递给正确的ID。没有效果。我得到错误bxSlider（）不起作用。

在我看来，他们没有访问bxSlider。错误在哪里？

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

} 

在这种main.scala.html在最后被添加：

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

在此之后其是一个请求（工作）到scala.js其中添加上述的HTML structur代码在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(); 

我加入这行到我的代码和所有工作的罚款。