如何在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>

如你所见，我想重复使用＃li-templ 部分，但似乎我必须将它写入一个名为 li-templ.mustache 的文件中，那么我可以将它包含为部分？

我可以在单个html文件中定义它们吗？

as you can see, I want to reuse the #li-templ part, but it seems that I have to write it into a file called li-templ.mustache then I can include it as partial?
can I just define them in the single html file?

推荐答案

我假设你使用了胡须的JS风味。

I'm assuming you're using the JS flavor of Mustache.

您需要：

1. 为名称定义一些虚拟数据
   
2. 通过获取＃li-templ的HTML来获取部分模板


3. 创建一个名为partial（li-templ）的对象作为键


4. 告诉Mustache使用视图数据呈现每个模板，包括您的部分

这里有一些jQuery可以做到这一点：

Here's some jQuery to do just that:

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);

以下是jsFiddle的全部工作 -

Here's a jsFiddle of it all working- http://jsfiddle.net/maxbeatty/EYDfP/

这篇关于如何在HTML中定义胡须部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！