【问题标题】：How can PHP and JS share HTML templates?PHP 和 JS 如何共享 HTML 模板？
【发布时间】：2012-02-18 02:22:21
【问题描述】：

应用程序

在 PHP 中，我将输出一些初始视图，以便网络爬虫可以抓取我的网站：

 ----------------
| cool view 1    |
 ----------------
| cool view 2    |
 ----------------
| cool view 3    |
 ----------------
| Load more      |
 ----------------

Javascript 还需要动态生成相同的视图。当用户点击“加载更多”按钮时，它会向服务器执行 AJAX 并将结果附加到页面：

 ----------------
| cool view 1    |
 ----------------
| cool view 2    |
 ----------------
| cool view 3    |
 ----------------
| cool view 4    |
 ----------------
| cool view 5    |
 ----------------
| cool view 6    |
 ----------------
| Load more      |
 ----------------

当前实施

目前，我的 PHP 视图和 JS 视图是分开编写的。下面是使用CodeIgniter 框架加载假设的 PHP 视图的示例。

view.php

<?php
<div>
    <span>cool view</span>
    <span><?=$id?></span>
</div>
?>

controller.php

$this->load->view(
    'view', 
    array('id' => '999')
);

下面是一个使用 Prototype 框架加载假设视图的 AJAX 示例。

ajax.php

echo json_encode(
    array('id' => random())
);

view.js

MyView = Class.create({
    initialize: function(id) {
        var div = new Element('div');
        var span0 = new Element('span').update('cool view');
        var span1 = new Element('span').update(id);
        div.appendChild(span0);
        div.appendChild(span1); 
        return div;
    }
});

controller.js

new Ajax.Request(
    '/index.php/someController/someMethod', {
        onSuccess: function(transport) {
            var response = transport.responseText.evalJSON();
            $('viewsContainer').appendChild(
                new MyView(response.id)
            )
        }
    }
);

需要更清洁的解决方案

我需要一种在 PHP 和 JS 之间共享 HTML 模板而无需重写所有内容的方法。在我的实际项目中，我有几十个视图。在 PHP 和 JS 中复制视图代码似乎很难维护。我没有采用 PHP 直接将 HTML 打印到 AJAX 的廉价路线，因为 1) 包含 HTML 标签会产生额外的大小开销，2) 它与客户端无关——也就是说，非浏览器客户端将无法理解输出，并且 3) 它不允许 JS 干净地将侦听器附加到视图内的子视图上。

【问题讨论】：

标签： php javascript ajax design-patterns prototypejs

【解决方案1】：

您可以将最终的 html 直接提供给浏览器：

if(<request is from ajax>)
   echo $this->load->view('view', array('id' => '999'), false);

最后一个参数false 将视图加载到一个变量中，在这种情况下返回它...

然后，在 javascript 方面，您只需创建一个新的 div，并将其设置为 innerHTML 为 response.text

【讨论】：

【解决方案2】：

我不认为你需要老派的方式。为什么不使用像 mustache1 这样的模板引擎？这样你就不会有大量的 HTML 开销，并且仍然可以发送只包含 id 的苗条 json（10 对 50 个字符和你的情况，甚至标记很轻）。

【讨论】：