php - 如何将 JSON 编码的 CSS 数据传递到 Mustache 模板中？

Question

因此，我们有一些基本的 Mustache 标记，可以在 {{{override_css}}} 中呈现 JSON 编码的 CSS 类。

....
<div class="js-modal-additional hidden-el"
  data-reposition="0"
  data-css="{{{override_css}}}">
</div>
....

下面是我们如何渲染我们的 mustache 对象:

<?php
   ...
   $data->override_css =
   json_encode(
          array(
            'position' => 'fixed',
            'z-index' => 10,
            'top' => 'auto'
          )
   );

   ...
?>

不幸的是:

<div class="js-modal-additional hidden-node" data-reposition="0" data-css="{" position":"fixed","z-index":3,"top":"auto"}">
</div>

很抱歉，如果之前已经介绍过了，但也许我遗漏了什么？令人惊讶的是，我在传递有效的 JSON 时遇到了很多困难。我想过使用 preg_replace 或其他一些 hacky 方法，但现在它不再是有效的 JSON，对吗？我需要 JS 能够在之后从 data-css 读取和应用 CSS 以覆盖默认值。任何要避免的东西!重要的标签。称之为糟糕的设计，但我的手在这里有点被迫。

非常感谢任何帮助!

Answer 1

您的 JSON 引号在第一个“{”之后结束您的 data-css 引号。

您需要对引号进行 HTML 转义。在您的 PHP 代码中写入:

<?php
   ...
   $data->override_css =
   htmlspecialchars(json_encode(
          array(
            'position' => 'fixed',
            'z-index' => 10,
            'top' => 'auto'
          )
   ));

   ...
?>

它会起作用。