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

Question

[Андрей]

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

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

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

[Дмитрий]

Добрый вечер.
Задайте кнопкам какой-либо css класс.
В js обращайтесь к этому классу и не мешайте php с html.

<?php
while ( $i <= $categoryCount) {
?>
<button id="btn<?= $i ?>" >
<?php
}

// регистрируете js код
$this->registerJs("
   $('button.className').on('click', function(){
         console.log($(this).attr('id'))
   })
", yii\web\View::POS_END);
?>

Или выносите в отдельный файл.

P.S.

Есть Модуль выводящий на форму N кнопок с объектами.

Возможно Вы не с того бока подходите к решению задачи. Но пока сделайте так, как я написал.

P.S.S.

Либо браузер либо YII уже не хочет принимать php переменные в JS коде.

Если js в отдельном файле, то засунуть туда php переменную никак не получится.

Comments

[Андрей]

Тут все бы хорошо, но мне нужно организовать прием 5 категорий файлов. ( решили так. ) На данный момент кол-во известно, но возможно еще добавится. На каждую категорию - свой обработчик. Все бы ничего, но я уже увлекся преобразованием кнопки загрузки файла. Кто занимался - поймет.

В моем случае JS обрабатывает нажатие на самописную кнопку и нажимает на стандартную кнопку браузера. Их 5 тоже. Я всю механику аплоада обернул в объект. Теперь мне надо отделить один JS от другого на выходе HTML.

Хотя пока писал - понял, что можно организовать один input = "file" , а не 5, и на самописные Button навесить data-... и их обрабатывать.
Спасибо добрый человек. Помог.

Answer 2

[Александр Докин]

Да, странный конечно пример. Обычно стараются как раз разделять фронтенд и бекенд код...

Т.к. у вас есть много элементов, для которых ожидается один handler, просто укажите у них общий класс и вешайте обработчик события на него.

Если же вам и правда нужны отличительные параметры, то на бекенде сгенерируйте в html нужные data-аттрибуты для этих элементов, а в js берите данные уже из готовой dom-структуры.

Comments

[Андрей]

Вот как раз минуту назад об этом и подумал пока человеку отвечал.
А насчет отделения бэкенда и фронтенда - я в объекте ( модуле ) описал как он должен отображаться и просто во фронтенде его вызываю.