jquery将内容加载到firefox中的脚本标签中答案

【问题标题】：jquery load content into script tag in firefoxjquery将内容加载到firefox中的脚本标签中
【发布时间】：2013-08-20 04:24:48
【问题描述】：

我有一个使用 jquery 1.7.2 的 html 页面。在页面中，我有一个这样的脚本标签。

<script id="navigation-template" type="text/x-handlebars-template"></script>

在页面下方，我正在使用 javascript 使用以下函数将我的车把模板加载到脚本标记中：

  loadTemplate: function( templateId, elementId ) {
    if ( !elementId ) {
      elementId = templateId;
    }
    $('#'+elementId).load('/my/path/templates.html #'+templateId);
  }

这在 chrome、eclipse 浏览器甚至 IE 9 中都可以正常工作，但在 Firefox 中似乎不太适用。

我已经调试并且加载调用成功完成并返回了内容，但是对$('#navigation-template').html()的调用给出了一个空字符串。

我在脚本标签中也有内容并调用了加载，发现它在.load 调用后被空字符串替换。

最后，如果我手动执行$('#navigation-template').html( "hello" );，我看到脚本标签的.html() 已更改。

如果我使用简单的 ajax 获取，那么我将不得不解析它并获取给定的元素，而不是依赖加载来为我获取元素。

如何在 Firefox 中解决这个问题？

【问题讨论】：

为什么要把它放到script标签里，难道不是从ajax(load)拿到模板就直接编译吗？
人力资源部。我会调查的。将它放入脚本标签的好处是我可以只使用load() 函数并且一切都完成了，然后当我想稍后应用模板时我可以。为了现在编译它，我必须以不同的方式加载它（提供一个成功处理程序来手动加载和处理它）但这可能是答案......
@Watson 感谢您指出显而易见的解决方案。我偶尔只使用javascript，所以有时我需要它。将您的评论作为答案，我会接受。

标签： javascript jquery firefox

【解决方案1】：

这是我用于此类目的的功能：

Util.loadTemplates = function(ExternalTemplates) {
    $.each(ExternalTemplates, function(index, value){
        var scriptUrl = value;
        $.ajax({
            url: scriptUrl,
            dataType: 'text',
            success: function(res){
                var templateName = value.slice(value.lastIndexOf('/') + 1, value.lastIndexOf('.'));
                TEMPLATES[templateName] = Handlebars.compile(res);
            }
        });
    });
}

var ExternalTemplates = [
    'templates/application.hbs',
    'templates/people.hbs'
];

但最好在页面发送到客户端之前进行编译，将模板转换为函数。

【讨论】：

谢谢。我得出了类似的解决方案。我会发布我的解决方案，但我仍然会接受您的回答，因为它为我指明了正确的方向。

【解决方案2】：

你使用的类型是 this

<script id="navigation-template" type="text/x-handlebars-template"></script>

尝试将类型更改为

<script id="navigation-template" type="text/javascript"></script>

【讨论】：

我没有加载javascript，我加载的是用作车把模板的html内容，所以类型是正确的。

【解决方案3】：

我喜欢 load() 的一点是，我可以将所有模板存储在一个文件中，并使用 load 为我感兴趣的模板选择 div。我编写了一个方法来加载模板文件并存储将模板转换为模板名称到模板源和编译模板的映射。我在第一次访问时编译模板，这样我就不必每次都编译所有模板，而只在需要时编译我需要的模板。它看起来像这样：

var myTemplateHelperThingy = {
  loadTemplates: function() {
    $.get( '/my/path/templates.html' )
      .done(function(data) {
        var elements = $(data);
        $( 'div.template-marker-class', elements).each( function( index, element ) {
          // need to use element instead of 'this' because IE is st00pid.
          var content = $(element)[0].outerHTML; // trick from StackOverflow
          myAppObject.pageTemplates[this.id] = {
            source: content,
            template: null
          };
        });
    });
  },
  getTemplate: function( name ) {
    // get a compiled template, compiling it if necessary.
    var result = myAppObject.pageTemplates[name].template;
    if (!result) {
      myAppObject.pageTemplates[name].template = Handlebars.compile(myAppObject.pageTemplates[name].source);
    }
    return myAppObject.pageTemplates[name].template;
  },
  evalTemplate: function( data, templateName ) {
    var template = myAppObject.getTemplate(templateName);
    if (template) {
      return template(data);
    }
    else {
      // message to user here that something went wrong.
    }
  },
  showTemplate: function( targetElement, data, templateName ) {
    $(targetElement).html(bi.evalTemplate( data, templateName ));
  }
}

templates.html 看起来像：

<html>
<body>
<div id="templates-wrapper-do-not-remove-or-jquery-will-not-find-the-templates">
  <div id="my-first-template" class="template-marker-class other-class">
    <!-- a bunch of content -->
  </div>
  <div id="my-second-template" class="template-marker-class another-class">
    <!-- more content -->
  </div>
</div>
</body>
</html>

【讨论】：