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

我加入這行到我的代碼和所有工作的罰款。