如何将信息从php传递到javascript

Question

我正在开发一个名为 Folder 的 Web UI 控件 - 它基本上模仿 Windows Explorer 文件夹 - 您会在矩形内看到一个项目网格，并且可以拖动项目，将项目拖放到控件的不同实例中，添加新项目等等。每个项目都由一个项目模板组成 - 基本上是一些指示项目外观的 php 代码，例如项目模板可能如下所示：

my_item_template.php:

<h3>my item</h3>
<p>i'm an item</p>

拖动项目时我想用不同的模板替换它，例如：

my_item_drag_template.php:

<h3>my item</h3>
<p>i'm being dragged</p>

一个页面可能包含许多不同类型的项目，每个项目都有其模板、加载模板、放置模板等。我的问题是将所有这些模板从服务器端移动到客户端。
我现在在做什么 - 在服务器端阶段，我找出我需要的所有模板并将它们包含在页面上，隐藏（显示：无）。每当我需要一个模板时（例如当用户开始拖动一个项目并且我需要它的拖动模板时）我找到它，克隆它并使用。我想避免将所有这些代码隐藏在我的页面中，也许将其存储在 jquery 的 $(folder).data 或其他东西中。但是，我仍然需要将其从 php.ini 中移出。一种选择是将模板插入到 $(folder).data 并在页面加载时将它们从页面中删除，但我宁愿避免它（它增加了不必要的 dom 操作）。有没有更好的方法？

Answer 1

这当然是一个有趣的问题，但我认为通过将模板存储在隐藏的 div 中的 dom 中，您离一个好的解决方案并不太远。除非您有 大量 模板，否则这通常是一种轻松访问的好方法。

另一种选择是在需要时通过 ajax 请求模板。您可以使用 jQuery 的 $.load 函数获取一段 html 并将其注入到元素中。

$('<div class="newItem" />')
  .load('getTemplate.php?template_id=newItem')
  .appendTo('body');

您显然必须用真实数据填充新元素，但您仍然可以在一次调用中完成。

这样做显然会影响性能，但如果您不介意提出请求，那么结构上的收益是相当可观的。它允许您像定义普通页面一样在后端定义模板，而不是将它们全部放在底部的隐藏 div 中。