Scala.js webloaded js libraries가 없습니까?

Question

scala.js를 사용하여 프로젝트를 설정했습니다.

웹 파트 (playframework)에서 정적 라이브러리 bxslider를 추가했습니다. scala.js를 사용하면 완전히 새로운 슬라이더 (div, ul 및 li)를 추가합니다. scala.js가 없으면 scala.js를 사용하면 삽입 된 코드가 슬라이더가되지 않습니다. bxSlider()를 사용하여 스크립트 부분을 올바른 ID에 전달하려고했습니다. 효과가 없습니다. 오류가 발생 bxSlider() 함수가 없습니다.

나는 bxSlider에 액세스 할 수 없다고 생각했습니다. 오류는 어디에 있습니까? html로 structur 위의 코드를 추가하는 scala.js이 후

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

은 (작동) 요청들이있다 :이 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)) 
     ) 
    ) 
    ) 
    } 

} 

이 끝에 추가된다 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(); 

는 내 코드에이 줄을 추가하고 모든 괜찮 았는데.