MJML - 模板插值、动态数据、上下文

Posted 2023-02-21

【中文标题】MJML - 模板插值、动态数据、上下文

【英文标题】：MJML - Template Interpolation, Dynamic Data, Context

【发布时间】：2017-08-24 00:15:11

【问题描述】：

经过大量搜索， 我很难找到如何：

MJML 处理动态数据和模板插值

我期待的是这样的：

import  mjml2html  from 'mjml';

const context = 
  message: 'Hello World'
;

const view = mjml2html(template, context);

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>message</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

【问题讨论】：

MJML 不处理任何模板。如果需要模板，请使用模板引擎渲染到 MJML。

你能解释清楚吗？

你记下来了吗？我一直试图弄清楚如何在 for each 循环中处理动态数据。 @Hitmands

我通过不使用mjml 解决了这个问题。这是一个关键特性，渲染两次并不理想......所以我们只是选择了更多实用的反应组件！

【参考方案1】：

MJML 不处理任何模板。如果需要模板，请使用把手等模板引擎渲染到 MJML。

import  compile  from 'handlebars';
import  mjml2html  from 'mjml';

const template = compile(`
<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>
          <mj-text>message</mj-text>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>
`);
const context = 
    message: 'Hello World'
;
const mjml = template(context);
const html = mjml2html(mjml);

【讨论】：

双往返存在性能问题。

由于 MJML 不支持模板，您不会得到更好的结果。

这个名为 mjml-utils 的 mjml 实用程序库对我很有用。