Kendo UI - 在工具提示中显示图像

Question

我在工具提示中显示图像时遇到问题。每个区域都包含一个照片字段。如果 Photo 字段为空，我正在尝试显示占位符图像。

这是我想要达到的目标的一个想法，尝试过但出现错误。我很确定这个模板在语法上是不正确的：

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (#=Photo# != 'null' && #=Photo# != '')  {#
            <img src="#=Territories[i].Photo#" alt="" />
        #} else{#
            <img src="https://cdn4.iconfinder.com/data/icons/website-kit-2/600/547756-Cross-128.png" alt="" />
        #}#
    #}#
</div>
</script>

这是一个带有有效工具提示的演示（没有上面的 sn-p）：
http://jsbin.com/iJunOsa/25/edit

Answer 1

问题是您在#= 和# 之间包含Photo 的if，但由于if 已经被# 包围，您不必这样做。

接下来是Photo 是Territories 元素的一部分，所以（我认为）您应该检查Territories[i].Photo 中的null 而不仅仅是Photo。

模板应该是：

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #for(var i = 0; i < Territories.length; i++){#
        #if (Territories[i].Photo != 'null' && Territories[i].Photo != '')  {#
            <img src="#=Territories[i].Photo#" alt="" />
        #} else{#
            <img src="https://cdn4.iconfinder.com/data/icons/website-kit-2/600/547756-Cross-128.png" alt="" />
        #}#
    #}#
</div>
</script>

在这里查看：http://jsbin.com/iJunOsa/32/

编辑在评论之后，它显示Territories 字段中有多个元素，并且由于每个元素都应该使用不同的Photo，因此还有一个问题是识别要显示的照片.

最简单的方法是在生成Description 文本的模板中添加有关照片的一些信息，当显示Tooltip 时，可以确切知道要显示哪个Photo。

我的意思是将用于生成Description 的模板更改为：

<script type="text/x-kendo-template" id="territoriesTemplate">
#for(var i = 0; i < Territories.length; i++){#
    <a class="hasTooltip" data-photo="#= Territories[i].Photo #">#:Territories[i].TerritoryDescription#</a>&nbsp;<button class="info-btn">Info</button>
#}#
</script>

我在其中添加了一个data-photo 元素，该元素的值是照片的路径，然后显示在工具提示中（即将data-photo="#= Territories[i].Photo #" 添加到锚点a）。

那么生成工具提示的代码就很简单了：

content: function (e) {
    // Get the template
    var template = kendo.template($("#storeTerritory").html());
    // Retrieve the photo from data and send it as argument to the template
    return template({ photo : $(e.target).data("photo")});
}

最后，模板的新定义也很简单：

<script type="text/x-kendo-template" id="storeTerritory">
<div class="tooltipcontent">
    #if (photo)  {#
        <img src="#=photo#" alt="" />
    #} else{#
        <img src="https://cdn4.iconfinder.com/data/icons/website-kit-2/600/547756-Cross-128.png" alt="" />
    #}#
</div>
</script>

这只是检查 photo 是否已定义，如果是则使用它，否则使用默认值。

在此处查看实际操作：http://jsbin.com/iJunOsa/40/