Question

我有一个使用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 get，那么我将不得不解析它并得到给定的元素而不是依赖于load来获取该元素。

如何在firefox中解决此问题？

Answer 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'
];

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

Answer 2

您正在使用此类型

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

尝试将类型更改为

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

Answer 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>

jquery将内容加载到firefox中的脚本标记中

3 个答案: