如何将信息从php传递到javascript

Question

我正在研究称为文件夹的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> 

一个页面可以举办很多不同类型的项目，各有各的模板，其负载的模板，其下降的模板等。我的问题是将所有这些模板从服务器端移到客户端。
我现在在做什么 - 在服务器端阶段，我找出了所有需要的模板，并将它们包含在页面上，隐藏（display：none）。每当我需要一个模板（例如，当用户开始拖动一个项目，我需要它的拖动模板），我找到它，克隆它并使用。我想避免将所有这些代码隐藏在我的页面中，也许将它存储在jQuery的$（文件夹）.data或其他东西。但是，我仍然需要从PHP中移动它。一种选择是将模板插入$（folder）.data，并在页面加载时将它们从页面中移除，但我宁愿避免它（它会添加不必要的dom操作）。有没有更好的方法？

Answer 1

这当然是一个有趣的问题，但我不认为你是一个很好的解决方案，将模板存储在dom中隐藏的div上太远了。除非你有很多的模板，这通常是一个很容易访问的好方法。

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

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

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

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