如何在动态加载输入时应用 jquery-ui 小部件

Question

我想在使用 udash repeat 方法加载的输入上使用 JQueryUI 微调器小部件。我尝试了以下方法：

val integers = SeqProperty(Seq[Int](5, 7))

val rootNode =
    div(
        button(onclick:= add, "Add"),
        repeat(integers) { p =>
            val in = input(value := p.get, cls := "my-spinner").render
            $(in).spinner()
            in
        }
    )

def add = { () =>
    integers.append(Random.nextInt(10))
}

def main(args: Array[String]): Unit = {
    dom.document.getElementById("root").appendChild(rootNode.render)
    // $(".my-spinner").spinner()
}

但这不会产生完整的 jquery-ui dom 即 required。当我检查我的 dom 树时，我得到的是：

<div>
   <button>Add</button>
   <input value="5" class="my-spinner ui-spinner-input" aria-valuenow="5" autocomplete="off" role="spinbutton" />
   <input value="7" class="my-spinner ui-spinner-input" aria-valuenow="7" autocomplete="off" role="spinbutton" />
</div>

而如果我注释掉最后一行，在 dom 加载后应用微调器，我会得到完整的 xml:

<div>
   <button>Add</button>
   <span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="height: 21px;">
      <input value="5" class="my-spinner ui-spinner-input" aria-valuenow="5" autocomplete="off" role="spinbutton" />
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-n" />
         <span class="ui-button-icon-space" />
      </a>
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-s" />
         <span class="ui-button-icon-space" />
      </a>
   </span>
   <span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="height: 21px;">
      <input value="7" class="my-spinner ui-spinner-input" aria-valuenow="7" autocomplete="off" role="spinbutton" />
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-n" />
         <span class="ui-button-icon-space" />
      </a>
      <a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
         <span class="ui-button-icon ui-icon ui-icon-triangle-1-s" />
         <span class="ui-button-icon-space" />
      </a>
   </span>
</div>

但是当然这种方法还不够，因为我需要能够动态加载我的输入。有没有办法动态应用微调器小部件？

Answer 1

我能够通过将我的输入包装在 div 元素中并在输入后附加一个脚本元素来解决这个问题。在此脚本中，我使用回调机制允许代码在每次加载新输入时为运行。回调机制并不完全直接，因为我只能在定义脚本标记时调用 javascript 代码。所以我添加了一个非原生 JS 类型来处理这个问题。我使用组件概括了整个方法。我已经在 ScalaFiddle

上概述了这个解决方案

如何在动态加载输入时应用 jquery-ui 小部件

How to apply a jquery-ui widget when an input is dynamically loaded

udash