2

をヘルパーに設定するbackground-color: #cccにはどうすればよいですか? {{colorLike}}この色はリスト アイテムに使用されます。

<template name="viewPost">
Names:
{{#each userNames}}
<li class="name"><a class="{{colourLike}}" href="{pathFor 'viewItem'}" >{{name}}</a></li>
{{/each}}
</template>

{{colorDislike}} また、別のヘルパーをに登録したいと思いbacground-colour: #fffます。これは、要素が特定のフィールドに存在する場合、 がオーバーライドされるようにするため{{colourDislike}}です{{colorLike}}。「if」ステートメントでこれを達成できると収集しています。

Template.viewPost.helpers({
    userNames: function(){
        var selectedPostId = Session.get('postId');
        var arrayOfLike = Posts.find({_id: selectedPostId}, {fields: {likes: 1}}).fetch();
        var sumArray = _.chain(arrayOfLike).pluck('likes').flatten().value();
            return Meteor.users.find({_id: {$in: sumArray}});
},
});

選択された投稿は、投稿のタイトルをクリックして作成された別のテンプレートのセッション セットからのものです。クリックすると、ユーザーは投稿を気に入ったユーザーのすべての userNames のリストを表示できます。だから私はこれらの名前<li class="name"><a class="{{colourLike}}" href="{pathFor 'viewItem'}" >{{name}}</a></li>を特定の色にすることを目指しています。

ユーザーが名前をクリックすると、viewItem テンプレートのこの特定のユーザー プロファイルのフィールドである「アイテム」を表示できます。このテンプレートには、アイテムを「嫌い」にするボタンも表示されていました。その場合、アイテムの userId が投稿ドキュメントの「嫌い」フィールドに保存されます。

<template name="viewItem">
 {{profile.item}}
  <div class="dislike">
    <button type="button" class="btn btn-default btn-lg">
     <span class="glyphicon glyphicon-remove"></span> Dislike
    </button>
 </div>
</template>
4

1 に答える 1

5

これを行う最も慣用的な方法は、セマンティック クラス (「好き」または「嫌い」など) を適用し、CSS でそのクラスを持つ要素に背景色を適用することです。

{{#each likingUsers}}
  <li class="name"><a class="liked" href="{{pathFor 'viewItem'}}" >{{name}}</a></li>
{{/each}}
{{#each dislikingUsers}}
  <li class="name"><a class="disliked" href="{{pathFor 'viewItem'}}" >{{name}}</a></li>
{{/each}}

これはあなたが既に書いlikingUsersたのと同じヘルパーで、似ていますが、代わりにそれを嫌うユーザーを取得します。userNamesdislikingUsers

/* css */

a.liked {
  background-color: #ccc;
}

a.disliked {
  background-color: #fff;
}

このように、好きな投稿と嫌いな投稿のスタイルを後で変えることにした場合 (たとえば、好きな投稿を緑色にする、嫌いな投稿に取り消し線を付けるなど)、JS コードや HTML テンプレートを変更する必要はなく、CSS のみを変更する必要があります。

于 2014-10-29T10:41:49.480 に答える