Kendo ScrollView - 刷新/重绘当前页面

Question

我正在使用 Kendo ScrollView 在表单上显示人物图像。

与 ScrollView 分开，用户可以更改图像的显示顺序。在他们保存对显示顺序的更改后，重新加载 ScrollView，滚动到第一项，然后应该以新顺序显示图像。

但是，我注意到当 ScrollView 当前位于第一页时，该页面不会刷新/重绘。

我的 ScrollView 看起来像这样：

@(Html.Kendo().ScrollView()
    .Name("personImage")
    .TemplateId("personImageTemplate")
    .DataSource(d => d
        .Custom()
        .Type("aspnetmvc-ajax")
        .Transport(t => t
            .Read(r => r.Action("PersonImages_Read", "Person", new { personID = Model.ID } ))
        )
        .Schema(s => s.Data("Data").Total("Total"))
        .ServerPaging(false)
        .PageSize(1)
    )
)

该模板如下所示：

<script type="text/x-kendo-tmpl" id="personImageTemplate">
    <img class="personImage" 
         src="@(Url.Action("ImageRender", "Person"))?imageID=#= data.ID #"
         title="#= data.Filename #" />
</script>

这是我的刷新功能：

function refreshPersonImageScrollView() {
    var scrollView = $("#personImage").data("kendoScrollView");
    if (scrollView) {
        scrollView.dataSource.read();

        // https://docs.telerik.com/kendo-ui/api/javascript/ui/scrollview/methods/refresh
        // redraws, doesn't re-read from datasource
        scrollView.refresh();
        
        // scroll to first image
        scrollView.scrollTo(0);
    }
}

当我看到调用此函数时发出的请求时，我看到了：

A.当一个页面以外第一页被选中：

1. PersonImages_Read（ScrollView 的dataSource 读取）
2. ScrollView 滚动到第一张图片
3. 3x ImageRender，因为它呈现 ScrollView 中的前 3 个项目

   B、选中第一页时：

   1. PersonImages_Read（ScrollView 的dataSource 读取）
   2. 没有别的

      我尝试调换scrollView.refresh()和scrollView.scrollTo(0)的顺序，但结果没有改变。

      有没有办法让剑道刷新/重绘当前页面？根据文档，我认为 refresh 会这样做，但事实并非如此。

      编辑

      我已经能够在REPL 中复制这个问题。要查看实际行为：

      1. 注意第一张图片下的“渲染”时间。
      2. 滚动到 ScrollView 中的第二张图像。
      3. 等待几秒钟，然后单击“刷新”按钮。
         ScrollView 应该滚动回到第一张图片。
      4. 观察第一张图片下的“渲染”时间与“刷新”按钮下方报告的“上次单击”时间相匹配，不再是步骤 #1 中的时间。 （这是正确的行为。）
      5. 在第一张图片上停留几秒钟。在继续之前请注意列出的“渲染”时间。
      6. 单击“刷新”按钮。
      7. 请注意，“上次单击”时间已更新，并且在“日志”部分中，有一个条目显示“dataSource read complete”大约在同时。但是，图像下的“渲染”时间没有改变，也没有日志条目显示“已加载产品 #X 的图像”。

Answer 1

我找到了解决问题的方法，但这可能值得使用 Telerik 打开一个可能的错误票，因为您会认为 scrollView.refresh 调用会起作用。

我在您的 refreshPersonImageScrollview 函数中所做的更改是在滚动视图上调用 setDataSource 而不是调用刷新方法。像这样：

function refreshPersonImageScrollView() {
    $("#refresh-last-clicked").text("Last clicked: " + getCurrentTime());
    addToLog("refresh button clicked");

    var scrollView = $("#personImage").data("kendoScrollView");
    if (scrollView) {
        scrollView.dataSource.read();
        
        scrollView.setDataSource(scrollView.dataSource);

        // scroll to first image
        scrollView.scrollTo(0);
    }
}

这似乎迫使 scrollView 重新评估其生命选择并正确刷新 :) 但是，它似乎确实会触发额外的数据源读取，因此并不理想。

我尝试的另一件事没有解决问题，但无论如何改变可能是一件好事，那就是利用 dataSource.read 调用返回的承诺。意思是，在 dataSource read promise 解决后执行 scrollView setDataSource 和 scrollTo 调用，如下所示：

scrollView.dataSource.read().then(function() {
    scrollView.setDataSource(scrollView.dataSource);
                
    // scroll to first image
    scrollView.scrollTo(0);
});

REPL link here