Лучший способ найти (т.е. установить CSS) на DIV в таблице, созданной {{#each}} в Метеоре?

0

У меня этот код работает, но интересно, если я делаю это долгий путь. Есть ли более эффективный способ? Я надеялся на 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.";
    }
};
  • 2
    Ваш . должно быть внутри кавычек? Опечатка? $(this).find('.repost')
  • 0
    Привет @PSL Я исправил опечатку, хотя мой реальный код в моем редакторе был в порядке, именно в этом посте я сделал опечатку, поэтому вопрос все еще сохраняется.
Теги:
handlebars.js
meteor

1 ответ

3
Лучший ответ

Можете ли вы просто сделать тег 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 "";
};
Поделиться
  • 0
    Мне тоже нравится этот способ, но на самом деле он немного сложнее, чем мой оригинальный способ, поскольку теперь вам нужно изменить шаблон с помощью {{extraClasses}}. Если кто-то может найти способ решить эту проблему в чистом jQuery, это было бы лучше и меньше кода.
  • 1
    +1 Это Метеоритный способ ведения дел. Вы можете видеть, что этот образец использовался много раз в примерах. @GiantElk Меньше кода не всегда означает более чистый код. Не только стремитесь к более короткому коду, но и пытайтесь отделить контент от презентации. Изменение цвета элемента будет обычным побочным эффектом для такой функции, как show_repost_txt . Если вы хотите иметь меньше JS-кода, вы могли бы написать class="repost {{#if isSharedByMe}} theColorGreen {{/if}}" но я бы не назвал это лучше.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню