Udash 动态加载输入时如何应用jQueryUI小部件

我想在使用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()
}

但这并不能生成所需的完整jQueryUIDOM。当我检查我的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>

添加

---

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

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