如何用Kendo在單行中顯示多個圖像？

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>