Javascript 如何在HTML中定义胡须片段？_Javascript_Html_Mustache

Javascript 如何在HTML中定义胡须片段？

javascript html

Javascript 如何在HTML中定义胡须片段？,javascript,html,mustache,Javascript,Html,Mustache,这是我的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}}

这是我的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 temp}

{{>li temp}
{{name}}

如您所见，我希望重用

#li temp

部分，但似乎我必须将其写入名为

li temp.mustache

的文件中，然后我可以将其作为

部分

？

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

我假设您使用的是JS风格的小胡子

在mustache.js中，partials对象可以作为第三个参数传递给mustache.render。对象应使用分部的名称设置关键帧，其值应为分部文本

您需要：

为name定义一些虚拟数据

通过获取#li temp的HTML来获取部分模板

创建一个名为partial（li temp）的对象作为键

告诉Mustach使用视图数据（包括局部视图）渲染每个模板

这里有一些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);

这里有一个完整的工作流程-

（ICH）可以帮助您完成这项工作

：使用Mustache.js进行客户端模板制作的简单/强大的方法

我发现将模板（在脚本标记中）与页面中的普通HTML混合在一起会扰乱我的代码编辑器（语法高亮显示、缩进等）。将它们作为单独的服务器加载可以保持HTML的整洁

每个文件签出一个模板

您还可以使用以下简单代码：

function getTemplates(url) {
    $.get(url, function (response) {
        $('template', response).each(function () {
           ich.addTemplate(this.id, $(this).text());
        });
    });
}

或者，如果您希望ICH从页面中的URL自动加载它们：

<head>
    <link rel="templates" type="text/html" href="my-templates.html">
</head>

在您的

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>



{{>li temp}

{{>li temp}
{{name}}

您好，值得注意的是，

Mustache.to_html

现在已被

Mustache.render

（函数定义保持不变）是我还是谷歌机器人以这种方式嵌入模板中的链接？这可能是由于type=“text/html”条目造成的吗？使用诸如：type=“text/mustache template”之类的内容会产生什么后果？因为mustache来自github，所以不会再执行，因为MIME类型是text，是一个修改过的fiddle，以防有人想要引用。

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