複数のリストビューのJSLink

Question

私はホームページのWebパーツとして多くのビューに使用したリストを持っているので、すべてのビューは同じリストからです。私が望むのは私のビューを特定のデザインでカスタマイズすることであるので、私はすべてのWebパーツのJSLinkを適用する必要があります。問題は、他のビューにも適用されるビューのJSファイルを適用するときです。 ネットではたくさん検索し、このチュートリアル http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-sues-with-jslink-and-Display-Templates-A-Solution / でもまだ私自身のJSファイルを構築する方法を理解していない ありがとう

Answer 1

The Answer of this question is that we can list by view ID; every view has his own viewID. there is the whole code of my script that I use to style 3 différents view coming from the same list

(function () {
/*
* Initialize the variable that store the overrides objects.
*/
var overrideCtx = {};
overrideCtx.Templates = {};

//  Assign functions or plain html strings to the templateset objects:
//  header, footer and item.
overrideCtx.Templates.Header = "<div style=\"background: #FFFFF120;\">";
overrideCtx.Templates.Footer = "</div>";

//  This template is assigned to the CustomItem function.
overrideCtx.Templates.Item = CustomItem;

overrideCtx.BaseViewID = 1; 
overrideCtx.ListTemplateType = 100;


// Register the template overrides.
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);

})();

/*
 * This function builds the output for the item template.
 * Uses the Context object to access announcement data.
 */
function CustomItem(ctx) {
    // Build a listitem entry for every announcement in the list.
      var view=ctx.view;
       var id=ctx.CurrentItem.ID;

    if (Head && (Head.length ) >= 25)
    {

        Head = Head.substring(0, 25) ;
    }

    // Return html element with appropriate color based on priority value
    switch (view) {
        case "MyfisrtviewID":
            return "<a href=''><span>" + ctx.CurrentItem.Title  + "</span>";
            break;

    case "mysecondviewID":
         return  "<a href=''><span >"+ ctx.CurrentItem.Title +"</span><span> - <b>"+ Head +"</b></span></div>";
        break;


        case "mylastviewID":
            return "<span style='color :#cab023'>" + ctx.CurrentItem.Title  + "</span>";
    }
}

Answer 2

There are couple of ways to handle your scenario (multiple views of the same list). When you override the context, it provides properties such as view, BaseViewID, webPartID etc. Within your JSLink, you can check if the view matches the GUID of the view you intend to apply JSLink to.

Cimares from myfatblog shows an excellent example of overriding the BaseViewID. Source: http://www.myfatblog.co.uk/index.php/2013/09/listview-web-part-issues-with-jslink-and-display-templates-a-solution/

See the slightly modified code below:

overrideContext.BaseViewID = 99;
overrideContext.ListTemplateType = 10002;

// Now override the RenderListView once the ClientTemplates.JS has been called
ExecuteOrDelayUntilScriptLoaded(function(){

    //Take a copy of the existing Microsoft Definition of RenderListView
    var oldRenderListView = RenderListView;

    //Now redefine RenderListView with our override
    RenderListView = function (overrideContext, webPartID)
    {
        //Check the context of the currently rendering List view
        if (overrideContext.ListTitle == 'YOUR_LIST_TITLE')
        {
            //Change the GUID below from your View, you can also check the webpart ID but webpart ID changes if you add/modify webparts
            if (overrideContext.view === "{E9555BA9-944E-4BAD-9992-F8C92A143145}") {
                //Override the BaseViewID if it's the one we want.
                ctx.BaseViewID = 99;
            }
        }

    //now call the original RenderListView
        oldRenderListView(overrideContext, webPartID);
}

}, 'ClientTemplates.js');


SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);

Answer 3

This might work I suppose.

Add the list web part -> open the web part menu for the same -> In the menu, select the required view from the drop down.

This way if the JS is associated will be applied else not.

P.S. I have tried it by using a couple of views and associating a JS file with one of them.