2

我最近开始使用 SharePoint 中的 JSLinks，我目前正在为这里的一些东西而苦苦挣扎，到目前为止，多个小时的浏览和搜索并没有真正帮助我，所以我希望你能做到。我有一个激活了类似功能的 SharePoint 列表。我想使用 jsLink 以不同的方式呈现 LikesCount-Column（图像基本外观显示了该列的开箱即用外观和我想要的外观）

基本上我所做的就是查看基本代码，将其带到模板引擎并使用以下代码替换 SharePoint 中的模板。正如您在第二张图片中看到的那样，它渲染得很好，我放松了事件处理。因此，当我单击 Like-Button 时，不会发送 Web-Request 并且不会喜欢该项目。

如果有人可以帮助我会很高兴

(function(){
	var inCtx = {
		Templates: {
			Fields: {
				'LikesCount':{
					'View' : LikesCount
				}	
			}
		},
	};	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(inCtx);


	function LikesCount(itemCtx){

		var tmplParams = {
			ElementId: itemCtx.CurrentItem.ID,
			Title: '',
			LikesCount : itemCtx.CurrentItem.LikesCount
		};
		var likedByIds = [];

		$.each(itemCtx.CurrentItem.LikedBy, function(index){
			likedByIds.push(parseInt(this.id));
			tmplParams.Title += this.title;

			if(index !== itemCtx.CurrentItem.LikedBy.length-1){
				tmplParams.Title += this.title +', '
			}
		})
		var result = '';
		if(likedByIds.indexOf(itemCtx.CurrentUserId) !== -1){
			tmplParams.ImageLink = '***/images/LikeButtonActive.png'
			result = $('.likes-count[version="0.1"]').tmpl(tmplParams).html();
		} else {
			tmplParams.ImageLink = '***/images/LikeButtonInactive.png'
			result = $('.likes-count[version="0.1"]').tmpl(tmplParams).html();
		}
		return result;
	}

})();
<script class="likes-count" version="0.1" type="text/x-jQuery-tmpl">
	<span id="root-likesElement-{{html ElementId}}">
		<a href="javascript:;" id="likesElement-{{html ElementId}}" class="ms-secondaryCommandLink"><img class="like-button" src="{{html ImageLink}}" /></a>
		<span title="{{html Title}}" class="ms-comm-likesMetadata ms-metadata">
			<span class="ms-comm-likesCount ms-comm-reputationNumbers">{{html LikesCount}}</span>
		</span>
	
	</span>
</script>

基本外观

看我想要

4

2 回答 2

1

对于打算呈现评级字段 SP.UI.Reputation.LikesRenderer，您可以查看sp.ui.reputation.debug.js以查找有关如何click注册事件处理程序的更多详细信息。

但LikesCount与其从头开始自定义渲染，我会建议一些不同的方法。这个想法是通过SP.UI.Reputation.LikesHelpers.ImageUrls类指定自定义图像 url，而该类又用于SP.UI.Reputation.LikesRenderer指定图像 url。

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({

      OnPreRender: function(ctx) {
          SP.UI.Reputation.LikesHelpers.ImageUrls.$W = "/Style Library/hand-like-32.png";
          SP.UI.Reputation.LikesHelpers.ImageUrls.$X = "/Style Library/hand-like-32.png";
      }
    });

});

结果

在此处输入图像描述

于 2016-12-19T15:33:15.440 回答
0

如果视觉差异是您唯一追求的，我会避免修改模板。我会写一个 JS 脚本，只在你需要的地方替换图片。
如果 SharePoint 对每种可能性都有不同的图标并且您想要覆盖它，只需找到包含图像名称和路径的相关字符串并将其替换为您自己的。
除非您希望改变点击行为，否则不应触摸/做任何超出我所说的事情。
确保仅在 SP.js 加载后执行：

    <script>
    ExecuteOrDelayUntilScriptLoaded(changeIcons, "sp.js");

     function changeIcons() {
      //find the string containing icon path and name
      //replace with your own path
      alert('Icons changed');
     }
     </script>

单击滚轮并选择编辑显示您的列表的页面并添加共享点标准脚本 Web 部件。将脚本放在那里并保存页面。
所以，除非我误解了你的意图，否则你应该没问题。

于 2016-12-18T12:25:59.200 回答