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的请求（可以工作），它将上面的代码添加到main.scala.html的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();

我在代码中添加了这一行，一切正常。

Scala.js webloaded js库不存在？

1 个答案: