0

我正在制作一个小型网站，我需要一种方法来多次使用相同的 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 这样的服务器端语言。

4

3 回答 3

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

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

实际上，您可以使用 Mustache.js（或类似）模板语言的 _show 请求在 CouchDB 中完成完整的模板化，并通过 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 特性，但具有提供预编译内容的性能。

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

于 2013-03-06T14:07:49.237 回答
1

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

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

它工作得很好。

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

于 2013-03-05T17:20:42.053 回答