javascript - Web 部件 javascript 不适用于数组

Question

我不知道 Sharepoint 脚本，我的同事也不知道 JavaScript。他使用了他在 http://www.wonderlaura.com/Lists/Posts/Post.aspx?ID=228 上找到的这个脚本。将名为 Progress1 的列的行设置为显示红色或绿色图像；

// JS Link script to show good and bad in colors 
// Upload this file in _catalogs/masterpages as a JavaScript Display Template
(function () {
    var patientFieldCtx = {};

    // Define template variable
    patientFieldCtx.Templates = {};

    // Define your required fields and functions to call in each case.
    // In our case the field is Progress
    // Override Function is PatientProgressViewTemplate

    patientFieldCtx.Templates.Fields = {
        "Progress1": {
            "View": PatientProgressViewTemplate
        },

    };

    // Register the template override with SP2013
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(
    patientFieldCtx
    );

})();

// Override Progress Level field with color based on conditional value 
function PatientProgressViewTemplate(ctx) {
    var _progressValue = ctx.CurrentItem.Progress1;

     if (_progressValue == 'Good') //field value
     {
         //return "<font style='color:green'>" + _progressValue + "</font>";
         return "<div style='text-align: center;' ><img src='../../SiteAssets/Green_Light_Icon.png' height='16' width='16'/>";

     }

     if (_progressValue == 'Bad')
     {
         return "<div style='text-align: center;' ><img src='../../SiteAssets/Red_Light_Icon.png' height='16' width='16'/>";
     }
}

在同一 View 中还有另一列名为 Progress2，需要应用相同的脚本。所以我建议；

// JS Link script to show good and bad in colors 
// Upload this file in _catalogs/masterpages as a JavaScript Display Template
(function () {
    var patientFieldCtx = {};
    var columns = ["Progress1", "Progress2"];

    for (var index = 0; index < columns.length; index++) { 
        // Define template variable
        patientFieldCtx.Templates = {};

        // Define your required fields and functions to call in each case.
        // In our case the field is Progress
        // Override Function is PatientProgressViewTemplate

        patientFieldCtx.Templates.Fields = {
            columns[index]: {
                "View": PatientProgressViewTemplate
            },

        };

        // Register the template override with SP2013
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(patientFieldCtx);
    }

})();

// Override Progress Level field with color based on conditional value 
function PatientProgressViewTemplate(ctx) {

    var _progressValue = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];


     if (_progressValue == 'Good') //field value
     {
         //return "<font style='color:green'>" + _progressValue + "</font>";
         return "<div style='text-align: center;' ><img src='../../SiteAssets/Green_Light_Icon.png' height='16' width='16'/>";

     }

     if (_progressValue == 'Bad')
     {
         return "<div style='text-align: center;' ><img src='../../SiteAssets/Red_Light_Icon.png' height='16' width='16'/>";
     }
}

但是这不起作用。没有任何线索说明原因。我必须承认，虽然我有 VS，但我并没有使用 VS 来测试这个。我怀疑我必须这么做。

Answer 1

您应该在代码的一部分中设置字段，如下所示:

patientFieldCtx.Templates.Fields = {
        "Progress1" : {
            "View": PatientProgressViewTemplate
        },
        "Progress2" : {
            "View": PatientProgressViewTemplate
        }
    };

对于数组，请尝试以下解决方案:

    var patientFieldCtx = {};
    var columns = ["Progress1", "Progress2"];
    patientFieldCtx.Templates = {};
    patientFieldCtx.Templates.Fields = {};
    for (var index = 0; index < columns.length; index++) { 
            patientFieldCtx.Templates.Fields[columns[index]]= {"View": PatientProgressViewTemplate};
    }
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(patientFieldCtx);