如何使用jquery加载文件和解析标记

Question

我有一个文件，其中包含很多标记，如下所示

<script type="text/template" id="template-1">
</script>

<script type="text/template" id="template-2">
</script>

我希望加载文件，而不是在内存中加载脚本标记中的所有内容。

我正在尝试下面的代码，但它不起作用。

tpl = {
        // Hash of preloaded templates for the app
        templates : {},
        loadTemplates : function(name) {
            var that = this;
            $.get(name, function(data) {
                $(data).find('script').each(function (_, entry) {
                    that.templates[$(this).attr('id')] = $(this).text();
                });
            });
        },

        // Get template by name from hash of preloaded templates
        get : function(name) {
            return this.templates[name];
        }
    };

有什么帮助吗？

电话是这样打的

tpl.loadTemplates('/templates/templates-home.html');

Answer 1

一般来说，你似乎走在正确的轨道上。浏览器将加载(但忽略)标记为type=text/template的脚本标记，稍后您可以选择这些标记的内容并使用javascript处理它们。

我认为你的问题可能与你的程序的顺序有关。

您还没有发布使用模板的javascript ，所以我只能假设。我怀疑您试图在文档准备好之前对模板进行load，因此，当您对脚本标记进行load时，它们实际上并不在页面上。要修复，您可以将javascripts 移到文档中的模板下面，或者在window.onLoad处理程序中执行代码。

编辑

好吧，现在我对你想做的事情有了更好的了解。你还没有告诉我这其中的哪一部分是坏的，但我的直觉告诉我，这一点就是问题所在：$(data).find('script')。jQuery希望遍历DOM。此时，数据只是从服务器返回的字符串，并没有实际加载到DOM中。因此，jQuery实际上不会找到任何脚本标记。在查询DOM以获取body元素之前，尝试将结果附加到script中。也许是这样的：

$('body').append(data);
$('script[type="text/template"]').each ...

不过，我并不是很高兴。你能把它们插入服务器端的页面吗？你为什么要延迟装船？

编辑2

如果您不希望脚本标记在html文档中可见，那么我建议您不要使用它们。相反，您可以让模板端点返回一束javascript并直接对其进行评估。类似于：

 $.get(name, function(data) {
     // data is a string that sets up your window.template variable
     eval(data);
 });