0

我需要存储 HTML 模板以将它们用于 Mustache 渲染。

<!-- Templates. -->
<span style="display:none">

<span id="tplCard">
    {{#.}}
    <div class="card">
        <div class="caption">
            <p>{{caption}}</p>
            <button title="Edit" class="toolbar edit"></button>
        </div>
    </div>
    {{/.}}
</span>

<span id="tplRow">
    {{#.}}
    <tr>
        <td>{{id}}</td>
        <td>{{caption}}</td>
        <td>{{text}}</td>
        <td>{{image}}</td>
        <td>
            <button>Edit</button>
        </td>
    </tr>
    {{/.}}
</span>

</span>
<!-- End of templates. -->

这里是使用：

function FillWithData(container, template, data)
{
    var tpl = $('#' + template).html();
    var html = Mustache.render(tpl, data);
    $('#' + container).append(html);
}

第一个模板有效，但第二个模板无效。好吧，问题是 a<TR>不是 a 的有效孩子<SPAN>，所以浏览器会删除它们。如何存储随机模板？

4

1 回答 1

1

您可以将模板数据存储在script标签中。这将阻止浏览器将其解析为 html。但是您需要记住，您的模板script本身不能包含标签（在 <script type="text/template"> 标签中包含 <script> 标签）。（这适用，<!doctype html>但老实说，我不能确定它是否可以跨浏览器用于其他文档类型）

您不需要在设置中进行太多更改：

HTML

<script type="text/x-template" id="tplCard">
    {{#.}}
    <div class="card">
        <div class="caption">
            <p>{{caption}}</p>
            <button title="Edit" class="toolbar edit"></button>
        </div>
    </div>
    {{/.}}
</script>

<script type="text/x-template" id="tplRow">
    {{#.}}
    <tr>
        <td>{{id}}</td>
        <td>{{caption}}</td>
        <td>{{text}}</td>
        <td>{{image}}</td>
        <td>
            <button>Edit</button>
        </td>
    </tr>
    {{/.}}
</script>

type="text/x-template" 用于使浏览器不会尝试将其作为脚本执行。

JS

function FillWithData(container, template, data)
{
    var tpl = $('#' + template).text()||$('#' + template).html();
    var html = Mustache.render(tpl, data);
    $('#' + container).append(html);
}

这$('#' + template).text()||$('#' + template).html()是必需的，因为在某些浏览器版本中您需要使用.text()，而在其他浏览器版本中您需要使用.html()来获取script标签的内容。

于 2013-04-03T22:06:56.663 回答