0

ツールチップ内の画像の表示に問題があります。各 Territory には 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

4

1 に答える 1

1

問題は、ifとのPhoto間#=に囲まれていることです#が、ifはすでに に囲まれているため、その#必要はありません。

次はそれPhotoが要素の一部であるTerritoriesため、(私が思うに)だけでなくもチェックTerritories[i].Photoする必要があります。nullPhoto

テンプレートは次のようにする必要があります。

<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があるため、表示する写真を識別するという追加の問題が1つあります。

簡単な方法は、テンプレートに写真に関する情報を追加することです。このテンプレートは、表示されたときにどれを表示するかを正確に認識Descriptionできるテキストを生成します。TooltipPhoto

つまり、生成に使用するテンプレートを次のように変更します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 に答える