如何使用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它们时，脚本标签实际上不在页面上。为了解决这个问题，你可以将你的javascript 移到文档中模板下面，或者在window.onLoad处理程序中执行你的代码。

编辑

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

$('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);
 });