Используйте переменные Twig во внешнем js-файле - PullRequest
Новая
       19

Используйте переменные Twig во внешнем js-файле

3 голосов
/ 19 мая 2019

Я настраиваю веб-пакет для своего проекта Symfony и хочу, чтобы у меня были специфичные для страницы файлы javascript.Мне нужно использовать фильтры веток, такие как {{ form.licenseText.vars.id }}, в моем внешнем js-файле, который я собираю в веб-пакете.Любая помощь здесь?

Я попытался настроить переменную и вызвать тег после того, что, кажется, не работает. 

$(document).ready(function(){
  $.trumbowyg.svgPath = '/img/trumbowyg-icons.svg';

  var trumbowyg_config = {
    btns: [
      ['formatting'],
      'btnGrp-semantic',
      ['link'],
      ['insertImage'],
      'btnGrp-lists',
      ['horizontalRule'],
      ['removeformat'],
      ['viewHTML'],
      ['fullscreen']
    ]
  };

  $('#{{ form.descriptionText.vars.id }}').trumbowyg(trumbowyg_config);
  $('#{{ form.licenseText.vars.id }}').trumbowyg(trumbowyg_config);

  /* toggle text boxes in respect to the auto update settings */
  $('#{{ form.descriptionTextAutoUpdate.vars.id }}').on('change', function() {
    var au = $('input[name="{{ form.descriptionTextAutoUpdate.vars.full_name }}"]:checked').val() == '1';
    var el = $('#descriptionText_div');
    au ? el.hide() : el.show();
  });
  $('#{{ form.licenseTextAutoUpdate.vars.id }}').on('change', function() {
    var au = $('input[name="{{ form.licenseTextAutoUpdate.vars.full_name }}"]:checked').val() == '1';
    var el = $('#licenseText_div');
    au ? el.hide() : el.show();
  });

Я хотел бы получить доступ к этим переменным ветки в моем внешнем jsфайл, как показано выше в коде.

Ответы [ 2 ]

2 голосов
/ 19 мая 2019

Для этого можно использовать два трюка.

а. Используйте классы или определенные атрибуты в ваших элементах формы и получайте к ним доступ с помощью глобальных селекторов. 

<?php

namespace App\Form;

class MyForm extends AbstractType
{
  public function buildForm(FormBuilderInterface $builder, array $options)
  {
       $builder->add("descriptionText", null, [
           "attr" => [ "class" => ["trumbowygable"]],
           ...
       ]) ;

       ... or ...

       $builder->add("otherField", null, [
           "attr" => [ "data-other-thing" => 1]],
           ...
       ]) 


  }
}

И JS выглядит как ... 

$('input.trumbowygable').trumbowyg(trumbowyg_config);
// or
$('input[data-other-thing]').on("someEvent", bla bla bla);

б. Создайте глобальную функцию JavaScript, которая получает элементы идентификатора по параметрам. 

function buildTrumbowyg(id_one, id_two) {
    $('#' + id_one).blaBlaBla( ... )
}
0 голосов
/ 20 мая 2019

вы можете использовать Ghost input (не отображается) для добавления переменных, которые вы хотите оценить как: 

<input type="text" name="your_variable_name" id="your_variable_id" value="{{ your_variable }}" style="display: none;">

и после вызова в вашем внешнем javascript, например: 

$(document).ready(function(){
/********/

let variable = $("#your_variable_id").val();

/*********/

});
...