sharepointsharepoint-2013jslink

Making jslink target specific list


Background
I got a page where I’m showing two list views from two separate lists which both have Custom List as their ListTemplate. They got their separate jslink file cause I don’t want them to look alike.

Problem
The js link file targets both listviews since they use the same Template.

Code

(function () { 
    var listContext = {}; 
    listContext.Templates = {}; 

    listContext.ListTemplateType = 100;

    listContext.Templates.Header = "<div><ul>"; 
    listContext.Templates.Footer = "</ul></div>"; 
    listContext.Templates.Item = LinkTemplate; 

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(listContext); 

})(); 

Question
Is there any way to make the js only target a specific list?


Solution

  • Ended up going with Paul Hunts solution that he writes about on myfatblog.co.uk. http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/

    The script ended up looking like this and I pasted it into the jslink function where I define what listContext to override.

    // Override the RenderListView once the ClientTemplates.JS has been called
    ExecuteOrDelayUntilScriptLoaded(function(){
    
        // Copy and override the existing RenderListView
        var oldRenderListView = RenderListView;
    
        RenderListView = function(ctx,webPartID)
        {
            // Check the title and set the BaseViewId
            if (ctx.ListTitle == "List")
                ctx.BaseViewID = "list";
    
            //now call the original RenderListView
            oldRenderListView(ctx,webPartID);
        }
    
    },"ClientTemplates.js");