Ограничения Thymeleaf на обработчик onmouseover - PullRequest
Новая
       7

Ограничения Thymeleaf на обработчик onmouseover

0 голосов
/ 17 апреля 2020

Я перевожу старое приложение Struts / JSP для использования Spring 5 и Thymeleaf. Исходное приложение имело тег logi c: iterate для переменной tt для строк в таблице, и в ячейке отображалась временная метка, отформатированная на серверной части во временном поясе пользователя, с наведением мыши на UT * 1022. * вот так: 

<td style="cursor: pointer; cursor: hand"
    onmouseover="return escape('<bean:write name="tt"  property="ts_UTC" />' + ' UTC')">
    <bean:write name="tt" property="ts_User" /></td>

Он генерирует вывод, который выглядит следующим образом: 

<td style="cursor: pointer; cursor: hand"
    onmouseover="return escape('04/06/2020 11:14:50 AM' + ' UTC')">
    04/06/2020 07:14:50 AM</td>

После нескольких попыток и чтения https://github.com/thymeleaf/thymeleaf/issues/705 и https://github.com/thymeleaf/thymeleaf/issues/707, я перевел его на тимелиф следующим образом: 

<td style="cursor: pointer; cursor: hand"
    th:onmouseover="return escape( '[[${tt.ts_UTC}]] UTC');"
    th:text="${tt.ts_user}"></td>

Проблема в том, что сгенерированный вывод выглядит так: 

<td style="cursor: pointer; cursor: hand"
    onmouseover="return escape( &#39;&quot;05\/04\/2015 08:05:24 PM&quot; UTC&#39;);"
    >05/04/2015 04:05:24 PM</td>

Понятия не имею, где " исходит от, и я действительно хочу, чтобы их снова превратились в апострофы. Я в тупике. Как мне это сделать?

1 Ответ

0 голосов
/ 17 апреля 2020

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

Я предлагаю переместить обработчик событий в отдельную функцию JavaScript, чтобы сделать вещи немного чище и более гибкими.

Начните с этого: 

<div style="cursor: pointer; cursor: hand"
     th:onmouseover="showMouseoverText( /*[[${tt.ts_UTC}]]*/ );"
     th:text="${tt.ts_user}">
</div>

Что это делает /*[[${tt.ts_UTC}]]*/? Используется экранированная форма JavaScript, встраиваемая - двойная скобка. Но это также обернуло это в комментарий, который использует JavaScript естественные шаблоны Thymeleaf . Это гарантирует отсутствие синтаксических ошибок при обработке шаблона.

Затем где-нибудь в разделе <head>...</head> добавьте следующее: 

<script th:inline="javascript">
    function showMouseoverText( ts ) {
        console.log(ts + ' UTC');
        return escape(ts + ' UTC');
    }
</script>

Строка консоли просто для тестирования. Для меня я получаю свои данные теста состояния c, напечатанные следующим образом: 

04/06/2020 11:14:50 AM UTC

Я не знаю, будет ли эта последняя строка return escape(ts + ' UTC') работать так, как вам нужно. Я не уверен, что он делает.

То, что вы получите на своей HTML странице, будет следующим:

Div: 

<div style="cursor: pointer; cursor: hand"
     onmouseover="showMouseoverText( &quot;04\/06\/2020 11:14:50 AM&quot;);">John Doe
</div>

Вы увидите экранированные символы / и одинарные кавычки, представленные как &quot;. Но функция JavaScript должна их обрабатывать (как показано в выводе консоли выше). Если нет, то, по крайней мере, вы можете манипулировать данными в вашей функции по мере необходимости.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...