У меня этот код работает, но интересно, если я делаю это долгий путь. Есть ли более эффективный способ? Я надеялся на 1 строку кода решения.
Я хочу изменить цвет одного DIV в таблице, созданной из {{#each}} в шаблоне Handlebars. Я придумал этот обратный вызов, поэтому каждый раз, когда isSharedByMe (который является полем в коллекции) становится истинным, реактивность шаблонов устанавливает цвет 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}} показывает только текст, например: "Share" или "Alished Shared".
Этот код выше работает, но я надеялся, что у меня будет 1 строка типа jQuery в моем помощнике show_repost_txt, чтобы установить цвет CSS одновременно с изменением текста на "Уже разделенный".
Но я мог бы выяснить, как установить ТОЛЬКО текущий класс.repost, так как this.find недоступен в пользовательских помощниках шаблонов, но доступен в обратном вызове.rendered (вместе с обработчиками событий). Я пробовал этот jQuery без везения:
Template.showRepost.show_repost_txt = function () {
if (this.isSharedByMe) {
// Type $(this) in the Browser console
// (it 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.";
}
};
Можете ли вы просто сделать тег 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 "";
};
show_repost_txt
. Если вы хотите иметь меньше JS-кода, вы могли бы написать class="repost {{#if isSharedByMe}} theColorGreen {{/if}}"
но я бы не назвал это лучше.
.
должно быть внутри кавычек? Опечатка?$(this).find('.repost')