Question

我有一个scrollview，它可以从api获取json数据并在scrollview中呈现项目。从数据中，我一次只需要渲染一个项目。

为了做到这一点，我尝试将pageSize：1添加到数据源，但它不会在滚动视图内呈现任何内容。当pageSize更改为2时，在scrollview中包含2个项目的项目可以正常渲染。如何在滚动视图中仅渲染一个项目？

<div id="example" style="margin:auto; width:60%">
    <div id="scrollView" style="height: 600px; width:100%;"></div>
</div>

<script id="scrollview-template" type="text/x-kendo-template">
    # for (var i = 0; i < data.length; i++) { #
    <div  data-role="page" style="width:100%;">
        <img class="carousal-image" src="#= 
        getPreviewImageUrl(data[i].Type,data[i].PreviewImageUrl) #"/>
    </div>
    # } #
</script>

<script>
       var dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "sample api",
                    dataType: "json"
                }
            },
            pageSize:1,
            schema: {
                data: "items"
            },

        });

        $("#scrollView").kendoScrollView({
            dataSource: dataSource,
            template: $("#scrollview-template").html(),
            contentHeight: "100%"

        });
</script>
Sample josn data

{
    "items": [
        {

            "PreviewImageUrl": "/images/ui/Default_News.png",
            "Type": "NewsType"
        },
        {
            "PreviewImageUrl": "/images/ui/Default_Blog.png",
            "Type": "BlogType"
        }
    ],
    "total": 2
}

Answer 1

当pageSize大于1时，传递给模板的data是一个javascript数组，但是当它等于1时，data则指向JSON对象本身。因此，您的模板需要更像这样：

<script id="scrollview-template" type="text/x-kendo-template">
  # if (data != null) { #
    <div data-role="page" style="width:100%;">
      <img class="carousal-image"
        src="#= getPreviewImageUrl(data.Type,data.PreviewImageUrl) #"/>
    </div>
  # } #
</script>

正在运行的演示here。希望这会有所帮助。

在kendo ui jquery scrollview中查看单个项目

1 个答案: