Блог

Я работаю над приложением Ruby on Rails и не могу найти способ правильно написать свою строку кода для предоставления в качестве аргумента переменной ruby моей функции JS. Я пытаюсь реализовать функцию обратного отсчета в соответствии с датой события.

Вот мой файл JS:

 let countdown;

const dynamicCountdown = (eventTime) => {
  if (document.querySelector(".timer")) {

    // Set a event date for my tests:
    // const eventTime = new Date();
    // eventTime.setHours(20);
    // eventTime.setMinutes(9);
    // eventTime.setSeconds(0);

    const timeRemaining = Date.parse(eventTime) - Date.parse(new Date());
    
    const hours = Math.floor(timeRemaining / (1000 * 60 * 60) % 24);
    const minutes = Math.floor((timeRemaining / 1000 / 60) % 60);
    const seconds = Math.floor((timeRemaining / 1000) % 60);

    if (timeRemaining < 0) {
      clearInterval(countdown);
      return;
    }
    
    const timerDisplay = document.querySelector(".timer");
    const display = `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    timerDisplay.textContent = display;
  }
}

setInterval(dynamicCountdown, 1000);

export { dynamicCountdown }

 

И часть моего html.erb показывает:

 <h3 class="timer">
  <%= javascript_tag "dynamicCountdown(@event.date_time)" %>
</h3>
 

Я попробовал другой способ: javascript_tag , <script> HTML-тег… но ничего не работает.

Спасибо за вашу помощь!

—————————- ОБНОВИТЬ ——————————-

Я, наконец, сделал это! Я использовал data-attribut . Вот как я с этим справился:

Я установил атрибут данных в моем html.erb для доступа к моему значению в моем js-файле <h3 class="timer" data-event-date='<%= @event.date_time %>'>

И в моем html.erb я извлекаю его, используя эти две строки кода: const timer = document.querySelector(".timer");
const eventDate = timer.dataset.eventDate;

Я надеюсь, что это может помочь кому-то еще, кто хочет отправлять данные в свои js-файлы 😉

Вы можете попробовать это в файле erb. Я надеюсь, что это работает

 <script>
  var date_time = "<%= @event.date_time %>";
  
  dynamicCountdown(date_time);
</script>
 

Вы должны переместить setInterval в скрипт в erb-файле

 <script>
  var event_date_time = "<%= @event.date_time %>";

  setInterval(function(){
    dynamicCountdown(event_date_time);
  }, 1000);
</script>