1

目前我正在使用 slim 框架为浏览器提供 html 模板。加载视图后，应用程序从 RESTful API 检索一些信息，并使用 handlebars.js 填充 DOM 的各个方面。

当提供 html 模板时，我想使用诸如 mustache.php 或 twig 之类的 php 模板系统来处理一些非常基本的模板需求。但是，作为 handlebars.js 使用与 mustache.php 和 twig 相同的语法，当使用从 API 检索到的信息填充 DOM 时，我遇到了一些重大冲突。

我目前唯一的解决方案是在 html 模板上执行 str_replace() 而不是使用上述 php 模板解决方案之一。

有没有办法可以使用其中一个 php 模板解决方案和 handlebars.js 而不会发生冲突？

4

1 回答 1

2

处理此问题的最快方法是更改​​服务器端模板中的 Mustache 分隔符。像这样的东西：

{{=<% %>=}}
<html>
<head>
  <title><% title %></title>
  <script type="text/x-handlebars-template" id="mytemplate">
    {{# stuff }}{{ otherstuff }}{{/ stuff }}
  </script>
</head>
<body>
  <h1><% title %></h1>
</body>
</html>

这样<%，Mustache.php 使用类型分隔符，{{而忽略类型分隔符，确保 Handlebars.js 可以使用它们。

如果您想继续使用 Mustaches 作为常规分隔符，您还可以立即更改 Handlebars 模板周围的分隔符：

<html>
<head>
  <title>{{ title }}</title>
  {{=<% %>=}}
  <script type="text/template" id="mytemplate">
    {{# stuff }}{{ otherstuff }}{{/ stuff }}
  </script>
  <%={{ }}=%>
</head>
<body>
  <h1>{{ title }}</h1>
</body>
</html>

如果您将车把模板移动到部分：

{{=<% %>=}}
<script type="text/template" id="mytemplate">
  {{# stuff }}{{ otherstuff }}{{/ stuff }}
</script>

...分隔符更改仅适用于该部分内部。然后你可以这样做：

<html>
<head>
  <title>{{ title }}</title>
  {{> handlebars_templates }}
</head>
<body>
  <h1>{{ title }}</h1>
</body>
</html>

我建议走这条路线，因为它是最易于维护的。

于 2012-10-10T23:27:51.893 回答