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对象）。即invitations数组中的更改未反映在PanelBar。

中

您可以在以下示例（http://jsfiddle.net/OnaBai/qb3su/）中看到，虽然“{deleted”元素未从PanelBar中删除，但它会从使用相同ListView的{{1}}中删除{1}} invitations。

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

DataSource

但这不会反映PanelBar DataSource中的更改，因为您可以在http://jsfiddle.net/OnaBai/qb3su/1/

中看到它

使用Kendo UI MVVM不会删除项目

1 个答案: