Javascript 如何使用kendoui动态创建listview

如何动态创建KendoUI ListView。我的意思是我想创建div、数据源、模板以及动态添加、编辑和删除功能。我如何使用kendoui做到这一点

我定义了如下模板

   <script type="text/x-kendo-tmpl" id="template">
          <div class="products">           
      <ul><li>
    # for (var i = 0; i < data.length; i++) { #
        #= data[i] #
    # } #
    </li></ul>            

        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>  

            <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>
        </div>
    </div>


   </script>

现在，列表视图正在加载三个名称以及编辑和删除按钮。但“删除”和“编辑”按钮不起作用。我没有给出创建、删除和更新的路径。基本上，我需要动态创建所有模板和数据源。 对不起，如果有任何错误。

---

感谢您的帮助。

看来您做得不对。在kendo UI listview的构造函数中，您必须传递单个项的模板，而不是整个列表，例如：

$("#listview").kendoListView({
    dataSource: dataSource,
    template: "<div>#: data #</div>"
});

---

希望这有助于入门。

到目前为止您尝试了什么？我正在尝试动态定义模板并将该模板添加到列表视图中。但是列表视图没有显示您能显示到目前为止的代码吗？您可以编辑这个问题，或者在JSFIDLE或JSBin中放置一个工作示例。

var data = ["Todd", "Steve", "Burke"];
 $("#dynamicdiv").kendoListView({
  template: kendo.template($("#template").html()),
  editable:true,                                          
  dataSource:data,                                          
 editTemplate:kendo.template($("#edittemplate").html()),
 }).delegate(".k-edit-button", "click", function (e) {
       alert("dtjherut");
       listview.edit();
       e.preventDefault();
}).delegate(".k-delete-button", "click", function (e) {
       alert("clicking");
       var model = dataSource.view()[$(this).closest(".tm").index()];
       dataSource.remove(model);
       e.preventDefault();
       dataSource.sync();
 }).data("kendoListView");

$("#listview").kendoListView({
    dataSource: dataSource,
    template: "<div>#: data #</div>"
});

var dataSource = new kendo.data.DataSource({data: ["Todd", "Steve", "Burke"]});