Javascript innerhtml 不适用于树枝标签答案

【问题标题】：Javascript innerhtml doesn't work with twig tagsJavascript innerhtml 不适用于树枝标签
【发布时间】：2014-10-15 10:51:58
【问题描述】：

我在 twig 中有一个函数，它从 db 中选择一些值并显示一个选择框。我正在尝试更改 div 的内容。问题是使用 innerHTML {{ 创建一个不带引号的新行，这显示为错误。它没有得到选择框，因为它没有引号。

$(document).ready(function() {
               $type = $("select[name='dtl[USER_TYPE]']");

               $type.change(function() {

                   if ($(this).val() == "AUTOR") {
                       var content = '{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]')  }}';
                       document.getElementById("kodi").innerHTML = '"'+ content + '"';
                   }
               });
           });

宏.twig

<select data-placeholder="{{ translate('ZGJIDH_NJE') }}" name="{{ name }}" class="form-control input-sm chosen-select">
        <option {% if not options.allowNull %}disabled{% endif %} selected value>{{ translate('ZGJIDH_NJE') }}</option>
        {% for f in dataset %}
            <option value="{{ f[kodField] }}" {% if f[kodField] | trim == selectedVal %}selected{% endif %}>
                {% if f[labelField] %}
                    {{ f[labelField] }} {% if f[kodField] %}&mdash; ({{ f[kodField] }}){% endif %}
                {% else %}
                    {{ f[kodField] }}
                {% endif %}
            </option>
        {% endfor %}
    </select>

编辑这显示在控制台中。 {{ 创建一个不带引号的新行：

 var content = "        
    <select data-placeholder="Zgjidh nje..." name="dtl[USER_TYPE_OBJECT_KOD]" class="form-control input-sm chosen-select">
        <option disabled selected value>Zgjidh nje...</option>
            </select>

【问题讨论】：

只用双引号而不是单引号包裹var content

标签： javascript jquery twig innerhtml

【解决方案1】：

问题是您的 twig 语法破坏了 javascript 语法。见下文，只需将'改为"

               if ($(this).val() == "AUTOR") {
                   var content = '{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]')  }}';
                   document.getElementById("kodi").innerHTML = '"'+ content + '"';
               }

正确代码：

           if ($(this).val() == "AUTOR") {
               var content = "{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]')  }}";
               document.getElementById("kodi").innerHTML = '"'+ content + '"';
           }

由于您输出的内容，JS 也被破坏了。你可以通过扩展树枝来解决这个问题：

$filter = new Twig_SimpleFilter('escape_for_js', function ($string) {
    $needles= array(
       "\n",
       "\r",
       '"',
    );
    $replaces = array(
      '',
      '',
      '\"',
    );
    return str_replace($needles, $replaces, $string);
});

将此过滤器添加到树枝中：

$twig = new Twig_Environment($loader);
$twig->addFilter($filter

使用此过滤器：

var content = "{{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]') | escape_for_js }}";

更多关于延长树枝here

【讨论】：

刚刚编辑了我的问题，出现了控制台中显示的错误。即使有你的回答
我明白了。你应该编写一个树枝过滤器，将所有换行符替换为空，所有“替换为\”
@jojo 添加了一个示例过滤器

【解决方案2】：

无需自己扩展 Twig。只需使用json_encode：

var content = {{ mm.select(holdersdata, data.USER_TYPE_OBJECT_KOD, 'dtl[USER_TYPE_OBJECT_KOD]') | json_encode }};

请注意缺少引号。 json_encode 会为你添加它们。

【讨论】：