Question

我正在开展一个小型的家庭酿造项目，我发现我已经被RoR和更具体的RoR partials所破坏了。

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

我考虑过使用iframes，但这看起来很混乱。我还考虑过使用xmlHTTP requests 在我的javascript中获取文件，然后使用文件流更新我的内容innerHTML的{{1}}。我之前已经为个人项目做过这件事，但这很糟糕，我必须使用div标记来标记Chrome之类的浏览器。显然我无法建议最终用户这样做。

我的另一个想法是将html写为javascript字符串，然后将不同的字符串作为--allow-file-access-from-files的值，但这听起来很难维护，根本就不干净。

最终，我甚至可以编写自己的解决方案（我会在这里发布，作为其他任何人的答案），但我想知道是否已有解决方案。

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

Main_page：

content.innerHTML

应用启动，文件<div id="main_content">  </div>已加载到menu.html：

yield area

最后，当他们点击<div id="main_content">  <ul> <li>Menu item</li> </ul>  </div>时，会将Menu item的内容加载到menu_item.html中，替换当前内容（content div）。

我已经做过一些研究：

Div like an iframe?
Div src attribute plugin（看起来很有趣，但在网络服务器上运行）
Stack question about updating div with javascript
Found a link somewhere that led to Pure看起来它可以做到这一点，但似乎很难实现很多内容（因为我没有生成menu.html的任何东西，我会有手工完成这一切。）
This talks about the seamless attribute of iframes，看起来很有前途，但只有Chrome已经实施，即便如此，它的错误也已被放弃。See here for status of webkit development of the seamless attribute.

Answer 1

如果你正在使用jQuery，你可以使用jQuery.load（）：http://api.jquery.com/load/

示例：

$("#main_content").load("menu_item.html");

Answer 2

如果你担心<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。

该函数假设你的partial有一个根元素（假设你可以有多个背对背的部分，但每个模板都是从一个元素开始的。

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

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

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

像rails这样的partials只在纯javascript中完成，纯粹在客户端。 --I.E。没有服务器

2 个答案: