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

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

你可以使用两个技巧。

一个。在表单元素中使用类或特定属性，并使用全局选择器访问它们。

<?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。创建一个通过参数接收 id 元素的全局 javascript 函数。

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

Answer 2

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

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

/*********/

});

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

Use Twig variables in external js file

global

external

symfony

twig

webpack