JSLINK لعدة طرق عرض قائمة

Question

لدي قائمة استخدمتها للعديد من الرؤية كأجزاء ويب في الصفحة الرئيسية، لذلك كل العرض من نفس القائمة.ما أريده هو تخصيص وجهة نظري في تصميم محدد، لذلك لا بد لي من تطبيق JSlink لكل جزء ويب، المشكلة هي أنه عندما أقوم بتطبيق ملف JS للحصول على عرض يتم تطبيقه أيضا للنظر الآخر. أنا أبحث كثيرا في الشبكة وأجد هذا البرنامج التعليمي http://www.myfatblog.co.uk/index.php/2013/09/lastview-web-part-issues-with-jslink-and-عرض قوالب-حلا / ولكن ما زلت لا أفهم كيفية بناء بلدي JSFile الخاص بي وتطبيقه شكرا

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.