0

I have an issue with displaying images within a tooltip. Each Territory contains a Photo field. I'm trying to display a placeholder image if the Photo field is null.

Here's an idea of what I'm trying to achieve, tried it out but got errors. I'm pretty sure this template is syntactically incorrect:

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

Here's a demo with a working tooltip (without the snippet above):
http://jsbin.com/iJunOsa/25/edit

4

1 回答 1

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/

于 2014-04-25T05:55:53.753 回答