HTML 模板 - 不要两次编写相同的 html (couchdb)答案

【问题标题】：HTML templates - don't write the same html twice (couchdb)HTML 模板 - 不要两次编写相同的 html (couchdb)
【发布时间】：2013-02-20 04:56:39
【问题描述】：

我正在制作一个小型网站，我需要一种方法来多次使用相同的 html。现在我有一个包含所有页面通用内容的 html 文件，然后我使用 AJAX 来获取包含部分 HTML 的 .html 文件。

例子：

主要的html：

<html>
    <head>...</head>
    <body>
        <div class="main-content-wrapper">
            <!-- AJAX puts html here -->
        </div>
    </body>
</html>

JavaScript：（摘录）

// Fire ajax request
$.ajax({
    url: pagename,
}).done(function (data) {

    // Overwrites old html with new html
    $('.main-content').html(data);

    if (callback)
        callback();   
});

但是当我尝试将事件绑定到按钮时，这给了我一个问题，在哪里包含用于 html 页面的 JavaScript/CSS 等。我真的不需要一个完整的框架，我只需要获取一些 html 所以我不必写两次。有人知道怎么做吗？

编辑：我从 couchdb 获取文件，所以我不知道我是否可以使用像 PHP 这样的服务器端语言。

【问题讨论】：

标签： javascript html jquery couchdb

【解决方案1】：

您可以使用服务器端语言（如 php 并使用 include）
您可以使用 JS 模板系统（如 underscore.js 或 mustache.js）
或者，如果您想继续以当前方式执行此操作，请利用 jQuery 的 .on() 将事件绑定到将来插入的 DOM 元素

【讨论】：

我从 couchdb 获取文件，所以我不知道我是否可以使用像 PHP 这样的服务器端语言。

【解决方案2】：

如果您的主要目标是保持“干”（不要重复自己）并避免多次编写相同的 HTML，那么有更简单的方法（比 AJAX 调用）来实现。

您实际上可以在 CouchDB 中使用 _show 请求（我们使用 Mustache.js（或类似）模板语言）完成完整的模板化，并通过 CouchDB 服务器运行整个过程。您可以对任何文档使用 _show 请求。 show 函数接收文档作为它的第一个参数。然后加载模板引擎（Mustache.js 可能非常适合您正在构建的内容），并通过 Mustache.to_html() 运行它并返回输出。

这里有更多关于 _show 函数的内容： http://guide.couchdb.org/draft/show.html

还有一组很好的关于使用 jQuery Mobile + CouchDB + Mustache.js 的博客文章。该系列的第三篇文章专门讨论了模板： http://custardbelly.com/blog/2010/12/28/jquery-mobile-couchdb-part-3-templates-and-mustache-js/

您不应该需要他在那里描述的所有内容（如 jQuery Mobile），但模板相关部分似乎适合您正在构建的内容，并且至少有清晰的 _show 函数示例。

此外，没有什么可以阻止将 PHP 与 CouchDB 一起使用。这只是更多（通常是不必要的）开销。您将在另一个 HTTP 服务器（CouchDB 中的那个）前面运行一个 HTTP 服务器 + PHP。无论如何，这是完全有可能的，如果你正在做图像处理或发送电子邮件之类的事情，并且不想将它们构建为 _changes 提要的反应事件（这对伟大来说“更深入”），那么这种方法是有价值的CouchDB 比你现在需要的多）。

如果您确实在 CouchDB 路线前面使用 PHP，我建议您查看 Sag：http://saggingcouch.com/ 这是我找到的 CouchDB 最干净的 PHP 库。

最后，您还可以查看 IrisCouch.com 的 Jason Smith 的 Static+ 项目： https://github.com/iriscouch/static-plus

它进行模板化（使用 Handlebars.js——它与 Mustache.js 非常相似），但在您的开发机器上进行，并且仅将静态内容发布到 CouchDB。您将获得模板化的 DRY 特性，但具有提供预编译内容的性能。

希望里面的东西有用。 :)

【讨论】：

谢谢，我一定会研究这种方法！
_show 函数不是用来显示数据库中的单个文档吗？是否在设计文档中包含 .html 附件？
它是用于数据库中的文档的，是的。它可以与您的设计文档中的内容一起使用，但不能与任何地方的附件一起使用（afaik）。但是，您可以将 HTML 直接存储在“模板”（或类似）下的 JSON 设计文档中。我在 BlueInk 中这样做：is.gd/blueink
是的，这行得通，但似乎有点不对劲。我是说;据我了解，这不是 _show 函数的使用方式，但这可能是最好的方法。感谢您的回答，里面有很多好东西，我已经用过很多了。
这没有什么“错误”。 :) 使用 _show 随你喜欢，并把你想要的任何东西放在 JSON 中。 “是时候放松一下了。”

【解决方案3】：

我建议使用服务器端技术来完成这项任务 - 我使用 PHP 来包含我的页眉/页脚、CSS 链接和 JS 包含。这是一个简单的单行：

<?php include '<yourfile>.html'; ?>

效果很好。

如果您必须使用 JS，则必须在将事件导入 DOM 后绑定事件，尽管 CSS 应该自动应用。

【讨论】：

我从 couchdb 获取文件，所以我不知道我是否可以使用像 PHP 这样的服务器端语言。
你可能是对的，虽然我认为 couchdb 应该支持跨域 PHP 请求。如果他们不这样做，您可以尝试this。否则我会使用卡比尔的 3 号。