Question

我是kendo ui的新手。我有一个像这样的购物车系统http://demos.kendoui.com/sushi/。我想通过创建图像数组在一行中显示多个图像。此地址的此演示站点的代码。 https://github.com/telerik/kendo-mobile-sushi

Answer 1

如果您修改了menu.js，条目如下：

{
    "id"         : 1,
    "name"       : "Sashimi salad",
    "price"      : 12.00,
    "image"      : "sashimi-salad.jpg",
    "category"   : "Cold starters",
    "description": "Organic greens topped with market fresh sashimi, wasabi soy vinaigrette.",
    "featured"   : true
},
{
    "id"         : 2,
    "name"       : "Chirashi sushi",
    "price"      : 21.00,
    "image"      : [ "chirashi-sushi.jpg", "chirashi-sushi.jpg", "chirashi-sushi.jpg"],
    "category"   : "Cold starters",
    "description": "Sushi bar variety with sushi rice.",
    "featured"   : false
},

如果您的条目为Sashimi salad，则只有一个图片定义为string，条目为Chirashi sushi，其中array定义了多个图片。

然后，您应该修改模板以检查image是string，如果不是，则迭代数组元素。类似的东西：

<script id="menuTemplate" type="text/x-kendo-template">
    <a data-role="button"
       data-click="addToCartFromList"
       data-item-id="#:id#"
       href="\\#">#:kendo.toString(price, "c")#</a>
    <a class="details-link" data-role="listview-link" href="\#details?id=#:id#">
        # if (typeof image === 'string') { #
        <img src="content/images/75/#= image #"/>
        # } else { #
        #     for (var i = 0; i < image.length; i ++) { #
        <img src="content/images/75/#= image[i] #"/>
        #     } #
        # } #
        <h2>#:name#</h2>
        <span class="added"#= cartDataSource.get(id) ? "" : 'style="display: none"' #>Item added to cart</span>
    </a>
</script>

如何使用Kendo在一行中显示多个图像？

1 个答案: