我的JSLink腳本不起作用

Question

我試圖使用JSLink ..finally ..，但遇到了一些麻煩，似乎無法理順。 對於我第一次進入兔子洞的冒險，我選擇了一些超級簡單的東西來用作概念證明。 因此，我查找了一個教程，並想出了一個簡單的腳本來在每個條目的“標題”字段周圍繪制一個框並設置文本樣式。 我無法使它正常工作。 您是否有機會為我查看此代碼？ 我在JSLink框中使用了以下標記。

〜sitecollection /網站/文件夾/文件夾/ file.js

和

〜網站/文件夾/文件夾/ file.js

.js文件與我嘗試修改的List View WebPart存儲在同一站點上。 該列表僅具有默認的“標題”列。

(function () {
            var overrideContext = {};
            overrideContext.Templates = {};
            overrideContext.Templates.Item = overrideTemplate;

            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
}) ();

function overrideTemplate(ctx) {
            return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}

Answer 1

似乎您正在嘗試覆蓋上下文（ctx）項本身，實際上您只想覆蓋列表字段和顯示該字段的列表視圖。 說得通？

首先，將overrideContext.Templates.Item更改為overrideContext.Templates.Fields：

(function () {
            var overrideContext = {};
            overrideContext.Templates = {};
            overrideContext.Templates.Fields = {
            // Add field and point it to your rendering function
            "Title": { "View": overrideTemplate },
            };  
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
        }) ();

然后，當JSLink運行時，渲染器在“列表”視圖中查找“標題”字段，並應用您的overrideTemplate函數。

function overrideTemplate(ctx) {
            return “<div style=’font-size:40px;border:solid 3px black;margin-bottom:6px;padding:4px;width:200px;’>” + ctx.CurrentItem.Title + “</div>”;
}

就在SharePoint頁面上運行多個JSLink而言，很有可能運行多個JSLink腳本，只需將它們用管道'|'分隔即可。 符號。 我經常使用SharePoint Online，並且看到以下格式始終有效（對不起，Sascha！）。

~site/yourassetfolder/yourfilename.js | ~site/yourassetfolder/anotherfilename.js

您可以根據需要同時運行任意多個腳本，只需將它們與管道分開即可。 我也在prem上看到了這一點，但是您可能希望將“〜sites”換成“〜sitecollection”，並確保要訪問的js文件在網站集中的頂級網站上！

我已經注意到在列表或頁面上運行多個JSLink時，因為它們都在進行客戶端渲染，太多的鏈接會使您的頁面變慢。 如果發生這種情況，您可能要考慮將它們組合到一個JSLink腳本中，以便服務器僅需調用一個文件即可返回客戶端以完成列表所需的所有呈現。

希望這可以幫助。