2

私は最近、SharePoint で JSLinks を使い始めました。現在、ここで何かに苦労しています。数時間ブラウジングと検索を行っても、これまでのところあまり役に立ちませんでした。Like-Feature が有効になっている SharePoint リストがあります。jsLink を使用して、LikesCount-Column を別の方法でレンダリングしたかった (基本的な外観の画像は、箱から出してすぐに見える列と、私が求めていた外観を示しています)

基本的に私がしたことは、基本的なコードを見て、それをテンプレート エンジンに取り、次のコードを使用して SharePoint のテンプレートを置き換えることです。2 番目の画像でわかるように、問題なくレンダリングされるので、イベント処理を緩めます。そのため、Like ボタンをクリックしても、Web リクエストは送信されず、アイテムは気に入られません。

誰かが私を助けてくれたらとても幸せです

(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>

ホイールをクリックして、リストを表示するページを編集し、sharepoint 標準スクリプト Web パーツを追加することを選択します。そこにスクリプトを配置し、ページを保存します。
だから、私があなたの意図を誤解していない限り、あなたはここから大丈夫です.

于 2016-12-18T12:25:59.200 に答える