Question

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

Answer 1

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

Answer 2

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

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

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

还有很多关于使用jQuery Mobile + CouchDB + Mustache.js的博客文章。系列中的第3个条目专门讨论模板： 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 feed的响应事件（这是“更深入”的伟大性），那么这种方法是有价值的。 CouchDB比你现在需要的那样）。

如果你在CouchDB路线前去PHP，我建议你看看Sag：http://saggingcouch.com/这是我发现的最干净的CouchDB PHP库。

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

它确实模板化（使用Handlebars.js - 与Mustache.js非常相似），但它在您的开发机器上执行并仅将静态内容发布到CouchDB。你得到了模板化的DRY-ness，但是提供了预编译的服务性能。

希望有些东西是有用的。：）

Answer 3

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

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

效果很好。

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

HTML模板 - 不要写两次相同的HTML（couchdb）

3 个答案: