剑道UI-在工具提示中显示图像

Kendo UI - Displaying images in a tooltip

本文关键字：显示 显示图 图像 工具提示 UI- 剑道      更新时间：2023-09-26

我在工具提示中显示图像时遇到问题。每个Territory都包含一个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>

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

问题是将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/

EDIT在注释之后，它显示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/

相关文章：