Use JS Variable for Content

[Ashleigh L]

I'm sure I'm missing something simple, but I can't seem to figure this one out.

Say I've got a template where I need to display the image for an object, and if the object has no image, display a default. I currently have this code inside my template: 

# if (data.Image.length > 0) { #
    <img src="/content/#= data.ID #/Image/#= data.Image #" class="img-responsive border-radius" />
# } else { #
    <img src="/content/default.jpg" class="img-responsive border-radius" />
# } #

Which works well, but I'm not thrilled w/ having to repeat the actual HTML image tag and classes - this is a small example, but what if I had a condition where there could be 10+ options for the image src?. Then I'd have the exact same HTML 10+ times.

I've tried creating a variable to hold the image source and then using that in the template, but this doesn't seem to work:

# if (data.Image.length > 0) {
    var image_var = "/content/#= data.ID #/Image/#= data.Image #";
}
else {
  var image_var = "/content/default.jpg";
}#
<img src="#= image_var #" class="img-responsive border-radius" />

The code above works for default image, but the src for the object with an image doesn't actually get the ID and image name values - this is what's in the src when the element is inspected:

/content/;$kendoOutput+='= data.ID ';/Image/;$kendoOutput+='= data.Image ';

Removing the "#= #" around the data just puts the "data.ID" text into the src:

/content/data.ID/Image/data.Image

[Alexander Popov]

Hello shimmoril,

You can avoid creating complex templates by using external JavaScript functions. For example: 

<script type='text/x-kendo-template'>
    <img src="#=getImageURL(data)#" class="img-responsive border-radius" />
</script>
<script>
  function getImageURL(data){
    //some logic
    return "some url generated in the getImageURL function";
  }
</script>

Regards,
Alexander Popov
Telerik

 

 

[Ashleigh L]

That works, thanks Alexander.