javascript - 在 Kendo-UI 中下拉刷新，文本重叠显示 "release"和 "pull"标签

Question

下拉刷新有问题。它第一次工作，但如果我更改为不同的 View ，然后返回原始 View ，Pull to refresh 和 Release to refresh 文本似乎得到复制并重叠在自己身上。我在这里“硬编码”数据源的数据，我不想使用传输 ajax。

我试图在 setOptions pull 方法中手动更新数据，而不是让 Kendo 通过 ajax 更新它。实际数据更新有效。没有 Javascript 错误，我在 Chrome 和 Firefox 中得到了相同的结果。

第一次工作:

移动到另一个 View 后，再回到这个 View ，然后下拉:

我的 View 代码是:

<div id="subitem-view" data-role="view" data-show="showSubItems">
    <div data-role="header">
        <div data-role="navbar">

        </div>
    </div>
    <ul id="subItemList" class="itemList">
    </ul>
    <script id="subItemTemplate" type="text/x-kendo-template">
       #:Name#
    </script>
</div>

Javascript:

function showSubItems(e) {

    var subItems = new kendo.data.DataSource({
        data: [
            { Name : "Test1" },
            { Name : "Test2" }
        ] 
    });

    e.view.element.find("#subItemList").kendoMobileListView({
        dataSource: subItems,
        pullToRefresh: true,
        template: kendo.template($("#subItemTemplate").html())
    });

    if (typeof (e.view.scroller.pull) == "undefined") {
        e.view.scroller.setOptions({
            pull: function () {
                console.log("pull event...");

                subItems.data([
                    { Name : "Test1 Updated" },
                    { Name : "Test2 Updated" }
                ]);

                setTimeout(function () { e.view.scroller.pullHandled(); }, 400);
            }
        });
    }
}

Answer 1

您要在每次 View 显示时初始化 Kendo UI Mobile ListView，这会导致不可预知的结果，例如重新创建下拉刷新标签。您应该只在 Init 事件中执行此操作。