javascript - 为什么在 SharePoint 2013 中进行 CAR 自定义后，项目未显示在 Web 部件中？

Question

我尝试使用 CSR Javascript 文件在 SharePoint 2013 中自定义 Web 部件，但在 View 发生所有更改之后，我拥有带有文本 [object Object] 的项目，而不是通常的列表项目。有什么问题吗？

我的JS代码:

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

 // Assign functions or plain html strings to the templateset objects:


//  This template is assigned to the CustomItem function.
overrideCtx.Templates.Group = CustomGroup;
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 ret = '<div style="width: 150px; border: 1px solid #333; padding: 5px;"> <div> <div style="float: left; display: inline-block;">' + ctx.CurrentItem.Title + 
'</div> <div style="float: right; display: inline-block;">' + ctx.CurrentItem.TaskDueDate + '</div> </div> <div style="word-wrap: break-word;">' + ctx.CurrentItem.CategoryDescription + '</div> </div>';
return ret;
};

function CustomGroup(ctx, group, groupId, listItem, listSchema, level, expand) {
var html = '<div style="font-weight:bold; display: inline-block;">' + listItem[group] + ' ::'  + '<div><ul>'+listItem+ '</ul></div>' + '</div>';
return html;
};

Answer 1

某些变量包含对象而不是字符串。这是找出哪些的方法。

在设置和返回“ret”变量之间向您的 JavaScript 添加一些输出跟踪。例如，在 CustomItem 中您可以添加:

console.log("Title, Due Date, and Category are:);
console.log(ctx.CurrentItem.Title);
console.log(ctx.CurrentItem.TaskDueDate);
console.log(ctx.CurrentItem.CategoryDescription);

使用浏览器打开页面并显示控制台。 (Chrome console instructions)

在控制台中，您将看到处理的每个项目的四行输出。其中之一可能会显示 [Object] 而不是您要查找的字符串值。 单击[对象]左侧的三 Angular 形图标可展开对象的属性。

现在您可以看到对象结构，调整“ret”变量以获取字符串值。例如，它可能是 ctx.CurrentItem.CategoryDe​​scription.Title 而不仅仅是 ctx.CurrentItem.CategoryDe​​scription