0

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

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

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

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

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

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

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

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

|    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 会更好吗？然后在为每个选定选项克隆的 html 块中使用 javascript 模板引擎（如 handlebars.js）？

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

还有什么明显的我遗漏或做错了吗？

谢谢！

4

2 回答 2

2

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

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

2- 使用模板（车把、小胡子、下划线等）在成功回调函数中呈现数据。

这将使您的代码更高效，对未来的 UI 请求更灵活（从用户体验的角度来看，您的代码将支持许多不同的实现）。

于 2012-07-31T18:46:32.343 回答
1

如果我理解正确，您从数据库中检索的信息是静态的（也就是说，它不会在每次单击复选框之间发生变化）。

如果以上是真的，我个人会这样做。（虽然只是我的意见）

我会从数据库中获取所有信息（指所有“复选框”）一次，服务器端（PHP）。然后我会把它们放在隐藏的 div 中：

<div id="stuffFromDb1" class="hidden" style="display: none">blablabla</div>

然后，当用户单击复选框时，我会显示对应的 div，方法是将 display: none 更改为 display: block。（使用 jQuery 更容易，请参阅Toggle。

在我看来，这似乎是最有效的方式，而不是通过 AJAX 或多个“表单”获取信息。

编辑：

与 AJAX 和表单发布相比，我更喜欢这种方法，因为它减少了对服务器的请求数量。除非数据库查询是 CPU 密集型（复杂），否则查询一次数据库通常比查询几次数据库更快，并为用户提供更好的体验。

编辑2：

没有看到代码很难给你答案，但对于 100 或 200 甚至 1000，我敢打赌，一次加载它们比一个一个地加载它们总体上会更快，特别是如果你能做到这一点只做 1查询数据库。

客户端模板系统总是依赖于客户端的速度。在较新的浏览器/新 PC 中，JS 引擎相当快，但对于较旧的 PC/较旧的浏览器，这根本不是真的。复杂的 DOM 操作 + 完成 AJAX 请求所需的时间可能需要相当长的时间，在此期间用户可能无法与页面交互。此外，可能会出现其他问题（AJAX Race Condition 出现在我的脑海中）。

于 2012-07-31T18:47:55.747 回答