您可以实例化页面加载后动态创建的 kendo-ui 对象吗？

Question

我已经成功地在移动应用中使用了 Kendo-UI 小部件。然而，我当前的应用程序要求我动态加载和使用各种 UI 元素。我尝试过像这样动态实例化 Kendo-UI 小部件：

<ul id="my_ul" >
<script>$('#my_ul').kendoListView().style("inset");</script>
  <li>
    <label>Label 1:
      <input id="dynamicLI1" type="text" name="dynamicLI1" value="" />
    </label>
  </li>
  <li>
    <label>Label 2:
      <input id="dynamicLI2" type="text" name="dynamicLI2" value="" />
    </label>
  </li>
</ul>

这失败了。有没有办法实现这一目标或类似的东西？我真的很喜欢 Kendo-UI，但是在 document.ready() 事件之后创建 Kendo-UI 对象是必须的。

---

更新 1 这是更新 DOM 的代码

function request() {
  var url = "██████████████████████";
  $.post(url, {deviceUUID: device.uuid})
    .done( function(res) {
        if(res) {
            $("#dynamic").html(res);
        } else {
            alert("Login failed :(\n" + res);
        }
    })
    .fail(function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
    })
    .always(function() {
        alert("post complete");
}

Answer 1

在您的脚本运行时，<li> 元素尚未创建。 尝试将脚本标签移动到您的 </ul>

之后

<ul id="my_ul" >
  <li>
    <label>Label 1:
      <input id="dynamicLI1" type="text" name="dynamicLI1" value="" />
    </label>
  </li>
  <li>
    <label>Label 2:
      <input id="dynamicLI2" type="text" name="dynamicLI2" value="" />
    </label>
  </li>
</ul>
<script>$('#my_ul').kendoListView().style("inset");</script>

---

这个 HTML 是否以某种方式动态添加到 DOM 中？您还可以执行以下操作：

// create new elements
var $list = $('<ul>...rest of html string...</ul>');
var $view = $('#myView');

// add elements to DOM
$view.append($list);

// init kendo list view
$list.kendoListView({
    style: inset
});

---

更新 1

您也可以通过这样做只依赖声明性小部件初始化：

<ul id="my_ul" data-role="listview" data-style="inset" >
  <li>
    <label>Label 1:
      <input id="dynamicLI1" type="text" name="dynamicLI1" value="" />
    </label>
  </li>
  <li>
    <label>Label 2:
      <input id="dynamicLI2" type="text" name="dynamicLI2" value="" />
    </label>
  </li>
</ul>

和：

    if(res) {
        $("#dynamic").html(res);
        kendo.bind($("#dynamic"), {}, kendo.mobile.ui);
    } else {

它应该初始化在 HTML 中声明的任何/所有小部件和 MVVM 绑定。