Question

我最近开始使用SharePoint中的JSLinks，而且我目前正在努力解决这个问题，到目前为止，多个小时的浏览和搜索并没有真正帮助我，所以我希望也许你可以。我有一个激活了Like-Feature的SharePoint列表。我想使用jsLink以不同的方式呈现LikesCount-Column（图像Basic Look显示该列的外观和我想要的Look）

基本上我所做的是查看基本代码，将其带到模板引擎并使用以下代码替换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>

Basic Look

Look that I'd like

Answer 1

如果视觉差异是你唯一的事情，我会避免修改模板。我会写一个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>

单击滚轮并选择编辑显示列表的页面，然后添加sharepoint标准脚本Web部件。将脚本放在那里并保存页面所以，除非我误解了你的意图，否则你应该可以从这里开始。

Answer 2

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

但不是从头开始定制LikesCount渲染，我建议采用一种不同的方法。我们的想法是通过SP.UI.Reputation.LikesHelpers.ImageUrls类指定自定义图片网址，然后由SP.UI.Reputation.LikesRenderer用来指定图片网址。

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";
      }
    });

});

<强>结果

自定义“赞” - SharePoint列表中的按钮

2 个答案: