Question

我正在为我的symfony项目设置webpack，并且我希望具有页面特定的javascript文件。我需要在Webpack中构建的外部js文件中使用树枝过滤器，例如{{ form.licenseText.vars.id }}。这里有帮助吗？

我尝试设置变量并在此之后调用标签，但这似乎不起作用。

$(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文件中访问这些树枝变量，如上面的代码所示。

Answer 1

您可以使用两个技巧。

a。在表单元素中使用类或特定属性，并使用全局选择器对其进行访问。

<?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);

b。创建一个全局javascript函数，以按参数接收id元素。

function buildTrumbowyg(id_one, id_two) {
    $('#' + id_one).blaBlaBla( ... )
}

Answer 2

您可以使用Ghost输入（未显示）来添加变量，例如：

select * from pg_locks where pid = 28477;

，然后在您的外部javascript中调用它，例如：

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

在外部js文件中使用Twig变量

2 个答案: