Пользовательский «Like» -Button в списке SharePoint

Question

Недавно я начал работать с JSLinks в SharePoint, и в настоящее время я немного борюсь с чем-то, и несколько часов просмотра и поиска на самом деле мне пока не помогли поэтому я надеялся, что ты сможешь. У меня есть список SharePoint с включенной функцией Like-Feature. Я хотел использовать jsLink для визуализации LikesCount-Column по-разному (изображения Basic Look показывают, как выглядит столбец из окна и Look, на который я хотел пойти)

В основном это то, что я сделал, я посмотрел на базовый код, перенес его в шаблон-Engine и заменить шаблон в SharePoint с помощью следующего кода. Как только это видно, как вы можете видеть во втором изображении, я теряю обработку событий. Поэтому, когда я нажимаю кнопку Like-Button, веб-запрос не будет отправлен, и элемент не понравится.

Был бы очень рад, если кто-то может помочь мне

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

 

 
\t function LikesCount(itemCtx){ 
 

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

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

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

 
})();

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

Basic Look

Look that I'd like

Answer 1

Для визуализации рейтинговых полей SP.UI.Reputation.LikesRenderer предназначен, вы могли бы взглянуть на sp.ui.reputation.debug.js, чтобы найти более подробную информацию о том, как зарегистрирован click обработчик событий.

Но вместо настройки рендеринга LikesCount я бы предложил немного другой подход. Идея состоит в том, чтобы указать собственный URL-адрес изображения с помощью класса SP.UI.Reputation.LikesHelpers.ImageUrls, который, в свою очередь, используется 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"; 
     } 
    }); 

}); 

Результат

Answer 2

Если визуальная разница в том, единственное, что вы после этого, Я бы отказался от изменения шаблонов. Я бы написал 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 стандартный скрипт веб-часть. Поместите там скрипт и сохраните страницу.
Итак, если я не понял ваше намерение, вы должны быть в порядке отсюда.