无法使用剑道UI MVVM删除项目

请参考下面的代码。按delete按钮时，我想删除包含delete按钮的列表项。 问题是项目未被删除

谢谢你的时间和帮助

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

---

问题是PanelBar是从数组中初始化的，但不使用它作为源，因为它不是可观察的对象。即，邀请数组中的更改不会反映在PanelBar中

在下面的示例中可以看到，虽然删除的元素没有从PanelBar中删除，但它是从与DataSource使用相同邀请的ListView中删除的

要删除它们，应执行以下操作：

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

---

但这不会反映PanelBar数据源中的更改，因为您可以在

中看到它，非常感谢。这有帮助。