Как продлить HTML Twig Escaper?

Question

Я постепенно перемещаю существующее приложение Symfony в VueJS.

Недавно обнаруженная проблема заключается в том, что разметка {{ stuff }} всегда интерпретируется VueJS, даже если содержимое поступает из визуализированной переменной ветки.

Чтобы избежать этого, я хотел бы расширить символ экранирования html, чтобы заменить { и } на соответствующие { и } html-коды.

Как я могусделать это правильно?Экранирование находится внутри twig_escape_filter без службы, которую я могу переопределить.

Я также попытался отгадать собственную стратегию побега, вернув мой побег vue, сам вызывая twig_escape_filter с побегом htmlперед заменой необходимых символов.Весь мой исходный код был экранирован.: -D

Спасибо за помощь.

Answer 1

На самом деле вы можете решить эту проблему в своем javascript так просто:

import Vue from 'vue';

Vue.options.delimiters = ['${', '}'];

Теперь вы можете использовать двойные скобки ({{ }}) для ветки, как вы делали раньше, и ${ } для VueJs.

РЕДАКТИРОВАТЬ : То, что вы хотите сделать, невозможно.Вы действительно можете преобразовать {{ }} в соответствующие ему html-сущности, используя простой фильтр, подобный следующему:

new \Twig_Filter('yourFilter', function ($string) {
    return htmlentities($string, ENT_HTML5);
}, ['is_safe' => ['html']])

, но, поскольку Vue работает поверх вашего рендеринга html, конфликт, который вы представляете, все равно будет возникать (поскольку html будетотображать эти html-сущности в скобках).

Ваше единственное решение - использовать более конкретный разделитель для вашего Vue, как этот, чтобы избежать этого конфликта:

Vue.options.delimiters = ['$vue{', '}'];