Моя задача — динамически добавлять строки таблицы в шаблон электронной почты. Вот как я создал шаблон электронной почты
<html>
<head>
<style type=3D"text/css">
</style>
</head>
<body><div>
<p>
{{userName}} modified the order. Here are the latest order details...
<br/>
<br/>
<table style = "font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<th style = "border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
<th style = "border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
<th style = "border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
</tr>
{{data}}
</table>
<br/>
<br/>
<p>- - - - -</p>
<p>Please do not reply to this email. You have received this email because you have opted in to these notifications. If you wish to no longer receive these notifications, you can turn them off in your user profile.</p>
</div></body>
</html>
И из бэкэнда я передаю объект с необходимыми данными, как показано ниже.
val tableData = '<tbody>
<tr><td>ABC</td> <td>5</td> <td>100</td></tr>
<tr><td>PQR</td> <td>2</td> <td>200</td></tr>
<tr><td>XYZ</td> <td>1</td> <td>75</td></tr>
</tbody>';
const processData = {
data: table,
userName: "XYZ"
}
Но в почте я становлюсь ниже содержания
Может кто-нибудь, пожалуйста, помогите мне динамически передавать строки таблицы.
@RabiiKahlaoui двигатель hbs.
В вашем шаблоне электронной почты вы передаете переменную «данные» в таблицу, которая содержит строку HTML для тела таблицы, но она не отображается как HTML в электронном письме.
Чтобы отобразить тело таблицы в формате HTML, вы можете использовать тройные фигурные скобки {{{data}}}
вместо двойных фигурных скобок {{data}}
в шаблоне Handlebars. Это укажет Handlebars отображать строку HTML как есть, не экранируя теги HTML.
Таким образом, окончательный результат должен выглядеть так:
<html>
<head>
<style type=3D"text/css"></style>
</head>
<body>
<div>
<p>
{{userName}} modified the order. Here are the latest order details...
<br/>
<br/>
<table style = "font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<th style = "border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
<th style = "border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
<th style = "border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
</tr>
{{{data}}}
</table>
<br/>
<br/>
<p>- - - - -</p>
<p>Please do not reply to this email. You have received this email because you have opted in to these notifications. If you wish to no longer receive these notifications, you can turn them off in your user profile.</p>
</div>
</body>
</html>
Вы можете проверить часть HTML-экранирования в документации для более подробной информации.
Помимо приведенного выше решения, есть еще одно. Из бэкенда вы можете передать массив объектов. А в шаблоне hbs встроены функции хелперов руля. Встроенные помощники Ссылка на документ
Вот ссылка, по которой я пытался создавать динамические строки, передавая массив объектов из бэкэнда, используя встроенные функции handlebars. Ссылка
Не могли бы вы указать, какой механизм шаблонов вы используете?