kendoui를 사용하여 목록 뷰를 동적으로 만드는 방법

Question

어떻게 KendoUI ListView를 동적으로 만들 수 있습니까? 내가 div, dataSource, 템플릿을 만들고 추가, 편집 및 기능을 동적으로 삭제하려는 뜻. 나는 겐도우를 사용하여 그것을 어떻게 할 수 있는가?

그때

<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> 

과 같은 템플릿을 동적 템플릿

<script type="text/x-kendo-tmpl" id="edittemplate"> 
      <div class="product-view"> 

      <ul><li> 
      # for (var i = 0; i < data.length; i++) { # 
     <input type="text" data-bind="value:data[i]" name="ProductName" required="required" validationMessage="required" /> 
      # } # 
      </li></ul> 
     <div class="edit-buttons"> 
     <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-edit"></span>Update</a> 

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

    </div> 

    </script> 

그리고 내가했던 것 정의 이제

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"); 

목록보기와 같은 스크립팅 세 개의 이름과 편집 및 삭제 버튼이로드됩니다. 그러나 삭제 및 편집 버튼이 작동하지 않습니다. 나는 여기에 생성, 삭제 및 업데이트를위한 경로를 제공하지 않았습니다. 기본적으로 모든 템플릿과 데이터 소스를 동적으로 생성해야합니다. 실수가 있으면 죄송합니다. 도움을 주시면 감사하겠습니다.

Answer 1

잘못된 방식으로 생각됩니다.

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

자세한 내용은 여기에서 찾을 수 있습니다 : http://docs.kendoui.com/getting-started/web/listview/overview#configuring-listview-behavior

또한, 그 이전에 검도 UI의 목록보기의 생성자에서 단일 항목이 아닌 전체 목록 등을위한 템플릿을 통과해야 dataSouce를 인스턴스화해야합니다 (예 :

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

희망).