使用Kendo UI MVVM不會刪除該項目請參閱下面的代碼。使用Kendo UI MVVM

Question

請參閱下面的代碼。按下刪除按鈕時，我想刪除包含刪除按鈕的列表項目。 問題是項目不會被刪除。

感謝您的時間和幫助。

 <div id="example"> 

     <div id="invitationsDiv"> 
        <ul id="invitationsPanelBar" data-template="template" data-bind="source: invitations"> 
        </ul> 
     </div> 
     <script id="template" type="text/x-kendo-template"> 

       <li>#= userName # <button data-bind="click: deleteProduct">Delete</button> 
       <ul> 
        <li>      

          #= invitationList.text # 
          #if (invitationList.state === "new") {# 
           New 
          #}# 

        </li> 
       </ul> 
       </li> 
     </script> 
     <script> 
      $(document).ready(function() { 

       var viewModel = kendo.observable({ 

       deleteProduct: function(e) { 
         var invitation = e.data; 
         var invitations = this.get("invitations"); 
         var index = invitations.indexOf(invitation); 
         invitations.splice(index, 1); 
        }, 
        invitations: [{"userName":"user1", "invitationList": {"text":"Check LV", "state": "new"}},{"userName":"user2", "invitationList": {"text":"Check NY", "state": "read"}}, {"userName":"user3", "invitationList": {"text":"Check NY", "state": "new"}} ] 
       }); 

       kendo.bind($("#example"), viewModel); 

       $("#invitationsPanelBar").kendoPanelBar({ 

       }); 

      }); 
     </script> 

    </div> 

Answer 1

的問題是，PanelBar從你的數組初始化，但不使用它source（它不是一個observable對象）。即PanelBar中未反映invitations陣列中的更改。

您可以在下面的例子（http://jsfiddle.net/OnaBai/qb3su/）雖然「刪除」的元素沒有得到來自PanelBar刪除它會從使用相同invitations爲DataSource一個ListView去除見。

從中刪除，你應該這樣做：

deleteProduct: function(e) { 
    var pbar = $("#invitationsPanelBar").data("kendoPanelBar"); 
    pbar.remove($(e.currentTarget).closest("li")); 
}, 

但這不會反映在數據源PanelBar的變化，你可以在http://jsfiddle.net/OnaBai/qb3su/1/