YII2 Подключение JS с привязкой к PHP переменной?

14 февраля 2022, 10:40

Очень дибильный вопрос.

Есть YII2, Есть Модуль выводящий на форму N кнопок с объектами. Надо подвесить один и тот же JS на каждую кнопку. Различия в кнопках только по ID. В JS различия уже по входным параметрам от объектов и коду кнопки как триггер. Код один и тот же.

У меня единственное получилось сделать вот так:

while ( $i <= $categoryCount) {
echo '<button id="btn'.$i.'" >';
echo "<script> $('btn".$i."').on('click', function() { console.log( $('btn".$i."') ); })</script>";
}

Пример очень минимализированный. Если таким образом описывать 2-3 команды, то фиг с ним. Лишних 5 мин не решат проблемы, Но если Код будет более - менее объемный, то тут уже сначала запутаешься в кавычках а там...

В общем пытался вынести JS код в отдельный файл, но Либо браузер либо YII уже не хочет принимать php переменные в JS коде.

Подскажите, как вообще поступают в таких случаях ?

Answer 1

Если я правильно понял вопрос, то сделал бы как то так:

сначала выводим кнопки:

while ( $i <= $categoryCount) {
echo '<button id="btn'.$i.'" class="category-btn">Кнопка</button>';
}

каждой кнопке добавили класс category-btn

затем в отдельном js-файле пишем слушатель:

$(document).on('click', '.category-btn', function() {
  let btn = $(this);
  console.log('Это кнопка с id=' + btn.attr('id'));
});

тут можно увидеть, что слушатель вешается на $(document), то есть код сработает даже если кнопки добавятся на страницу спустя некоторое время после загрузки скрипта, или после загрузки скрипта, или вообще когда угодно. внутри обработчика получаем переменную btn - в ней будет jquery объект кнопки по которой кликнули. дальше делаем с ней что хотим внутри этой функции

p.s. вешать слушатель на селектор класса, вообще, не очень хорошая идея, т.к. классы используются в css и в любой момент может поменяться вёрстка, класс потеряется и js-функционал пропадёт. лучше использовать html data-атрибуты. с ними сразу будет видно, что на кнопку навешан js-функционал