0

根据 Nicholas Zaka 的书 'Maintainable JavaScript'，我知道在我的页面中放置一个小型 HTML 模板的最佳方法是添加如下内容：

    <script type="text/x-templates" class="templates">
            <div class="template1"> ... </div>
            <div class="template2"> ... </div>
            ...
    </script>

我更喜欢这种方法，而不是将我的模板放入<body>并使用 css 隐藏它们，因为这些仍然会显示在像 dillo 这样的浏览器中。

我目前使用 jQuery 获取它们的方式是：

    var $templates = $('<div/>').append($('.templates').text()).children();

我尝试过但不起作用的事情是：

    var $templates = $('.templates');
    var $templates = $($('.templates').text());
    var $templates = $($('.templates').html());

我现在的解决方案有效，但在我看来并不是很优雅。最好的方法是什么？

4

3 回答 3

0

编辑：我想我最初误解了你的问题——我没有意识到你在同一个标​​签中有多个script模板。我建议将每个模板分解成它自己的标签，因为这可能更容易管理（然后你没有额外的解析和div标签来保持它们分开）。例如，为您的模板标记考虑这个：

<script type="text/x-templates" class="template" id="template1">
    [template 1]
</script>

<script type="text/x-templates" class="template" id="template2">
    [template 2]
</script>

在你的 JavaScript 中是这样的：

// create a map of templates (keyed by the template's id)
var templates = {};
$('.template').each(function() {
    var $template = $(this);
    templates[$template.attr('id')] = $(this).html();
});

//usage
$('body').append(templates.template1);
$('body').append(templates.template2);

这是它的实际演示：http: //jsfiddle.net/KyWj6/

于 2013-04-03T23:24:01.077 回答
0

试试这个：

var $templateHtml = $('.templates').html();
var $templates    = $('<div/>').html(templateHtml);

或者，将其设为一行：

var $templates    = $('<div/>').html($('.templates').html());
于 2013-04-03T23:24:21.723 回答
0

$($('.templates').html())如果“模板”类的内部 HTML 以空格开头，将会很困难，所以你需要$($('.templates').html().trim())。你最终会遇到更多麻烦，因为你的脚本标签的内部 HTML 没有根节点，所以你需要类似的东西：

<script type="text/x-templates" class="templates">
    <div>
        <div class="template1">temp1</div>
        <div class="template2">temp2</div>
        ...
    </div>
</script>

然后，您可以使用以下内容获取 template1 的 HTML：

var templatesCollection = $($(".templates").html().trim());
alert(templatesCollection.children(".template1").html());

但是，说了这么多，为什么不把每个模板放在自己的带有 ID 的脚本标签中呢？（除非您计划拥有多个实例，否则类没有多大意义，并且在模板场景中，我认为这不是您想要的。）

所以更像是：

<script type="text/html" id="template1">
   <div>temp1</div>
</script>

然后是一个非常简单的选择器：$("#template1").html()

于 2013-04-03T23:35:33.440 回答