PHP 还是 JS 模板引擎？ (对于同一 html 的多个 block )

Question

主要问题在底部以粗体显示，但我将引导您了解我要问的内容和原因。

基本上，我现在一次为用户做的事情，并尝试让他们选择在一页上显示所有内容。正在使用 PHP 将数据放入 html 中，但有兴趣改进我的代码，并想知道带有 javascript 的 handlebars.js 是否更有意义，即使只是为了我自己的理智。

假设用户有一个列表，每个列表旁边都有复选框

[x] Option 1
[ ] Option 2
[ ] Option 3
...
[x] Option 20

对于每个选中的框，都会显示一个 html block ，其中包含来自数据库的信息。

现在，我每页只显示一个 html block 。 PHP 在同一页面上，抓取数据，并循环遍历两个查询生成的 2 个数组，并在 html 中使用内联 php 生成当前的 html block 。

....
<div class="option-wrapper">
    <?php foreach ( $option_list as $option ) : ?>
....

需要能够在同一页面上生成相同的代码块 1 到 20 次。我想我仍然可以使用 php 内联并循环整个 html block 来为每个选定的选项创建另一个 html block 。

|    Option 1      |  |    Option 20     |
|  Title: Test1    |  |  Title: Test2    |

但我想知道为此目的使用 JavaScript 模板引擎是否有优势。我将 javascript 写入图表数据，目前我隐藏了存储 php 变量的 html 元素(其中 15 个来自两个数组)，然后由我的 jQuery 提取。但我已经觉得在 html 中隐藏变量至少感觉是不好的做法。

<div id="total-users" style="display:none;"><?php echo $total_users ?></div>
....
var totalUsers = $('#total-users').html();

这可能是其中之一，如果您不得不问，这可能是不好的做法类型的问题。但是，老实说，这是不好的做法吗？

为了编写更高质量的代码，在 php 获取所有数据后使用 json_encode 会更好吗？然后使用像handlebars.js这样的javascript模板引擎，并在为每个选定选项克隆的html block 中？

还有一件事，我将来可能希望能够使用每个 block 中的下拉菜单切换动态显示的数据，这是否会改变哪条路线更有意义？

还有其他明显的我遗漏或做错的事情吗？

谢谢!

Answer 1

我绝对建议使用数据模板。

1- 当用户选择一个选项(或从所有可用选项中提交最终选择)时，进行 AJAX 调用以检索 JSON 对象(您可以在一次 JSON 调用中返回一个对象或所有选项数据，首选后者)。

2- 使用模板( Handlebars 、 mustache 、下划线等)，在成功回调函数中呈现数据。

这将使您的代码更加高效，并且对于 future 的 UI 请求更加灵活(从用户体验的 Angular 来看，您的代码将支持许多不同的实现)。