0

我有一个使用 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()for 脚本标记已更改。

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

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

4

3 回答 3

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

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

于 2013-08-26T23:02:20.660 回答
0

您正在使用这种类型

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

尝试将类型更改为

<script id="navigation-template" type="text/javascript"></script>
于 2013-08-20T04:54:39.947 回答
0

我喜欢的一件事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>
于 2013-08-27T03:27:34.200 回答