Javascript 如何在 HTML 中定义小胡子部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8076817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to define mustache partials in HTML?
提问by wong2
this is my html:
这是我的 html：
<script type="text/html" id="ul-template">
<ul id="list">
{{> li-templ}}
</ul>
</script>
<script type="text/html" id="ul-template2">
<div id="list2">
{{> li-templ}}
</div>
</script>
<script type="text/html" id="li-templ">
<p>{{ name }}</p>
</script>
as you can see, I want to reuse the #li-templpart, but it seems that I have to write it into a file called li-templ.mustachethen I can include it as partial?
can I just define them in the single html file?
如您所见，我想重用该#li-templ部件，但似乎我必须将其写入一个名为的文件中，li-templ.mustache然后我可以将其包含为partial?
我可以在单个 html 文件中定义它们吗？
回答by maxbeatty
I'm assuming you're using the JS flavor of Mustache.
我假设您使用的是 JS 风格的 Mustache。
In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.
在 mustache.js 中，可以将部分对象作为第三个参数传递给 Mustache.render。该对象应以部分名称作为键，其值应为部分文本。
You need to:
你需要：
- Define some dummy data for name
- Get your partial template by getting the HTML of #li-templ
- Create an object with the name of the partial (li-templ) as the key
- Tell Mustache to render each template with the view data including your partial
- 为名称定义一些虚拟数据
- 通过获取#li-templ 的 HTML 来获取部分模板
- 创建一个以局部名称（li-templ）为键的对象
- 告诉 Mustache 用视图数据渲染每个模板，包括你的局部
Here's some jQuery to do just that:
这里有一些 jQuery 可以做到这一点：
var view = {"name" : "You"},
li = $('#li-templ').html(),
partials = {"li-templ": li},
ul1 = Mustache.to_html($('#ul-template').html(), view, partials),
ul2 = Mustache.to_html($('#ul-template2').html(), view, partials);;
document.write(ul1, ul2);
Here's a jsFiddle of it all working- http://jsfiddle.net/maxbeatty/EYDfP/
这是所有工作的 jsFiddle - http://jsfiddle.net/maxbeatty/EYDfP/
回答by Joel Purra
ICanHaz.js(ICH) can help you with this.
ICanHaz.js(ICH) 可以帮助您解决这个问题。
ICanHaz.js: A simple/powerful approach for doing client-side templating with Mustache.js.
ICanHaz.js：一种使用 Mustache.js 进行客户端模板的简单/强大的方法。
I've found that mixing templates (in scripts tags) with the ordinary HTML in the page messes with my code editor (syntax highlighting, indenting etcetera). Loading them as a separate server keeps your HTML clean.
我发现将模板（在脚本标签中）与页面中的普通 HTML 混合会干扰我的代码编辑器（语法高亮、缩进等）。将它们作为单独的服务器加载可以使您的 HTML 保持干净。
Check out this ICH pull request for automatic loading of <script type="text/html" src="my-templates.html"></script>from your serverto one template per file.
查看这个 ICH 拉取请求，自动<script type="text/html" src="my-templates.html"></script>从您的服务器加载到每个文件的一个模板。
You could also load more than one template per remote HTML file thisusing simple code like:
您还可以使用简单的代码为每个远程 HTML 文件加载多个模板，例如：
function getTemplates(url) {
$.get(url, function (response) {
$('template', response).each(function () {
ich.addTemplate(this.id, $(this).text());
});
});
}
Or, if you'd like ICH to load them automatically from urls in your page:
或者，如果您希望 ICH 从您页面中的 url 自动加载它们：
<head>
<link rel="templates" type="text/html" href="my-templates.html">
</head>
$("link[type=templates]").each(function (index, link) {
getTemplates(link.attr("href"));
});
In your my-templates.html
在你的 my-templates.html
<templates>
<template id="ul-template">
<ul id="list">
{{> li-templ}}
</ul>
</template>
<template id="ul-template2">
<div id="list2">
{{> li-templ}}
</div>
</template>
<template id="li-templ">
<p>{{ name }}</p>
</template>
</templates>
