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