在流星中由{{#each}}創建的表中的DIV上查找（即設置CSS）的最佳方法？

Question

我有這段代碼可以工作，但是想知道我是否正在做很長的一段路。 有沒有更有效的方法？ 我希望有1行代碼解決方案。

我想更改通過Handlebars模板中的{{#each}}創建的表中單個DIV的顏色。 我想出了這個回調，所以每當isSharedByMe（這是Collection中的一個字段）變為true時，模板反應性會將CSS顏色設置為綠色：

Template.showRepost.rendered = function () {

  if (this.data.isSharedByMe) {
     $( this.find('.repost') ).css( {'color': 'green'} );
      }

  return; // I like to explicitly show a return value so people know 
          // I'm not returning any specific value on purpose. 
          // Not sure if this kills efficiency (separate topic).
};

Handlebars模板很簡單，我稱其為我的主模板的一部分，該模板具有{{#each posts}}調用，該調用生成表格：

<template name="showRepost">
    <a href="#" class="repost">{{show_repost_txt}}</a>
</template>

{{show_repost_txt}}僅顯示返回的文本，例如“共享”或“已共享”。

上面的代碼可以正常工作，但是我希望在show_repost_txt幫助器中有1條jQuery類型的行，以便在將文本更改為“已共享”的同時設置CSS顏色。

但是我可以弄清楚如何僅設置當前類.repost，因為this.find在自定義模板助手中不可用，但在.rendered回調（以及事件處理程序）中可用。 我沒有運氣嘗試了這個jQuery：

Template.showRepost.show_repost_txt = function () {
    if (this.isSharedByMe) {

        // Type $(this) in the Browser console 
        // (it's the jQuery call to the DOM window object, 
        // I just can't figure out how to get the specific DIV I need.

        $(this).find('.repost').css( {'color': 'green'} );

        return "Already shared.";
    }
};

Answer 1

您可以像這樣使css標簽具有反應性嗎？

<template name="showRepost">
    <a href="#" class="repost {{extraClasses}}">{{show_repost_txt}}</a>
</template>

然后將其添加到您的CSS：

// Returns any extra classes to be applied to the link
Template.showRepost.extraClasses = function () {
    if (this.data.isSharedByMe) {
        return "theColorGreen"; // you will also need to add a 'theColorGreen' class to your .css file that matches this
    }

    return "";
};