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

Question

我是剑道ui的新手。我有一个类似http://demos.kendoui.c​​om/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只有一个图像定义为 astring和条目的Chirashi sushi地方有多个图像定义在一个array.

然后，您应该修改您的模板以检查是否image为 a 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>