如何将信息从php传递给javascript

Question

我正在开发一个名为Folder的Web UI控件 - 它基本上模仿了Windows资源管理器文件夹 - 你看到一个矩形内的项目网格，可以拖动一个项目，将一个项目放在一个不同的控件实例中，添加新物品等。每个项目都由一个项目模板组成 - 基本上是一些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的$（文件夹）.data或其他东西中。但是，我仍然需要从php移动它。一个选项是将模板插入$（文件夹）.data并在页面加载时从页面中删除它们，但我宁愿避免它（它添加了不必要的dom操作）。有没有更好的方法？

Answer 1

这肯定是一个有趣的问题，但我不认为你通过将模板存储在隐藏的div中的dom中而离开一个好的解决方案。除非您拥有很多模板，否则这通常是轻松访问的好方法。

另一个选择是在需要时ajax请求模板。你可以使用jQuery的$ .load函数来获取一大块html并将其注入元素。

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

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

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