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绑定。

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

1 个答案: