javascript - Kendo UI - Displaying images in a tooltip -

i have issue displaying images within tooltip. each territory contains photo field. i'm trying display placeholder image if photo field null.

here's idea of i'm trying achieve, tried out got errors. i'm pretty sure template syntactically incorrect:

<script type="text/x-kendo-template" id="storeterritory"> <div class="tooltipcontent">     #for(var = 0; < 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 demo working tooltip (without snippet above):
http://jsbin.com/ijunosa/25/edit

the problem if enclosing photo between #= , # since if surrounded # don't have to.

next photo part of territories elements, (i think) should checking territories[i].photo null , not photo.

the template should be:

<script type="text/x-kendo-template" id="storeterritory"> <div class="tooltipcontent">     #for(var = 0; < 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> 

check here: http://jsbin.com/ijunosa/32/

edit following comment show having multiple elements in territories field , since each of them should use different photo, there 1 additional problem identifying photo show.

the easies way adding information photo in template generates description text when tooltip shown, knows photo show.

what mean changing template use generating description to:

<script type="text/x-kendo-template" id="territoriestemplate"> #for(var = 0; < territories.length; i++){#     <a class="hastooltip" data-photo="#= territories[i].photo #">#:territories[i].territorydescription#</a>&nbsp;<button class="info-btn">info</button> #}# </script> 

where added data-photo element value path photo shown in tooltip (i.e. add data-photo="#= territories[i].photo #" anchor a).

then code generating tooltip simple as:

content: function (e) {     // template     var template = kendo.template($("#storeterritory").html());     // retrieve photo data , send argument template     return template({ photo : $(e.target).data("photo")}); } 

finally, new definition of template pretty simple:

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

that checks if photo defined , if uses it, otherwise uses default value.

see in action here : http://jsbin.com/ijunosa/40/