Question

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

这是我想要实现的想法，尝试过但却出错了。我很确定这个模板在语法上是不正确的：

<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>

这是一个带有工作工具提示的演示（没有上面的代码片段）：
http://jsbin.com/iJunOsa/25/edit

Answer 1

问题是if在Photo和#=之间隐藏了#，但由于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/

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

1 个答案: