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时，脚本标签实际上并不在页面上。要修复，您可以移动文档中模板的 ，或者在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); });

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

1 个答案: