I tested out the use of JSlink on the homepage with a demo list & it worked fine.
I then used the same JSLink on the Demo List itself but images did not render.
Any ideas on what I'm missing?
~site/Webparts/JSLink/JSLinkFieldTemplateBase.js|~site/Webparts/JSLink/JSLinkFieldTemplateExt.js
function listItemClick() {
$(".status-image").on("click", function () {
var status = $(this).attr("data-val");
alert("STATUS: " + status);
});
}
_spBodyOnLoadFunctions.push(listItemClick);
(function () {
var overrideContext = {};
overrideContext.Templates = {};
overrideContext.Templates.Fields =
{
'Status': { 'View': overrideTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
function overrideTemplate(ctx) {
var status = ctx.CurrentItem.Status;
var image = "";
if (status == "Delayed")
image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Delayed.png";
if (status == "On-time")
image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Ontime.png";
if (status == "Late")
image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Late.png";
return "<img class='status-image' src='" + image + "' data-val='" + status + "' />";
}
Updated to:
function listItemClick() {
$(".status-image").on("click", function () {
var status = $(this).attr("data-val");
alert("STATUS: " + status);
});
}
_spBodyOnLoadFunctions.push(listItemClick);
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function () {
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
Templates: {
Fields: {
'Status': { 'View': overrideTemplate }
}
}
});
});
function overrideTemplate(ctx) {
var status = ctx.CurrentItem.Status;
var image = "";
if (status == "Delayed")
image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Delayed.png";
if (status == "On-time")
image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Ontime.png";
if (status == "Late")
image = "http://URL/sites/Main/Testing/Webparts/JSLink/Status-Late.png";
return "<img class='status-image' src='" + image + "' data-val='" + status + "' />";
}