2

我正在做一个小型家庭酿造项目，我发现我已经被与 RoR 尤其是 RoR 一起工作宠坏了partials。

我的项目完全是客户端。所以我使用 javascript 和 HTML5。现在我想做的是：有一个带有容器的主屏幕模板，我可以在其中执行类似于<%= yeild %>RoR 中的经典标记的操作。

我曾考虑过使用iframes，但这似乎很乱。我还考虑过使用xmlHTTP 请求在我的 javascript 中获取文件，然后使用文件流更新innerHTML我的内容。div我以前为个人项目做过这个，但它很hacky，我必须用--allow-file-access-from-files标签标记像Chrome这样的浏览器。显然我不能建议最终用户这样做。

我的另一个想法是将 html 编写为 javascript 字符串，然后将不同的字符串作为值，content.innerHTML但这听起来很愚蠢，难以维护，而且根本不干净。

最终，我什至准备编写自己的解决方案（然后我会在这里发布作为其他人的答案），但我想知道是否已经有解决方案。

最终目标行为将遵循以下流程：

主页：

<div id="main_content">
    <!-- this is the yield area -->
</div>

应用程序启动并将文件menu.html加载到yield area：

<div id="main_content">
    <!-- this is the content of menu.html, notice it's like a partial, 
         there is no body or head or doc type tags, just a list -->
    <ul>
        <li>Menu item</li>
    </ul>
    <!-- this is the end of the menu.html content -->
</div>

最后，当他们单击Menu item它时，会将 的内容加载menu_item.html到content div替换当前内容 ( menu.html) 中。

我已经做过的一些研究：

4

2 回答 2

0

如果你使用 jQuery，你可以使用 jQuery.load()：http ://api.jquery.com/load/

例子：

$("#main_content").load("menu_item.html");
于 2013-03-26T21:17:17.963 回答
0

如果您担心 DOM 的安全性<div>（这是一件值得担心的好事），那么您最好使用<div>不附加到 DOM 的中介。

function parse_html (html) {
    var div = document.createElement("div");
    div.innerHTML = html;

    var scripts = div.getElementsByTagName("script"),
        i = scripts.length;

    while (i > 0) {
        div.removeElement(scripts[i]);
        i -= 1;
    }

    return div.firstChild;
}

然后，如果您通过 XHR 获取 HTML 文件：

var xhr = new XMLHttpRequest();
xhr.open("GET", "/templates/menu.html", true);

你可以把你var child_el = parse_html(xhr.responseText);的 XHR 回调。
然后只需将该元素附加到您的 div 中。

该功能假设您的部分有一个根元素（假设您可以有多个背靠背的部分，但每个模板将从一个元素开始。

如果不是这种情况，那么您将在函数 ( document.createDocumentFragment();) 中创建一个文档片段，并将每个元素按顺序附加到片段中，在函数末尾返回片段，然后将其附加到 div （当然，事后这会使 div 内的节点管理变得更加困难）。

我正在为一些宠物项目做类似的事情，使用一个简单的模板系统，用于在 html{% %}中注入数据属性 ( {% item.title %}) 或函数中的任意 JS/返回值。

这只是一个基本的实现，你可以用它做很多事情......
支持任意嵌套级别，对于模板内部的模板将是更多的工作。

于 2013-03-26T22:50:04.113 回答