jQuery的加载内容到Firefox的脚本标记

我有一个使用jQuery 1.7.2的HTML页面。在页面内，我有一个像这样的脚本标签。jQuery的加载内容到Firefox的脚本标记

<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); 
    }

这在铬做工精细，月食浏览器，甚至IE 9，但似乎在Firefox中南下。

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

我也在脚本标记中有内容，并调用负载，并在调用.load后看到它被替换为空字符串。

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

如果我去一个简单的ajax得到然后我将不得不解析它并得到给定的元素，而不是依靠加载来获取我的元素。

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

来源

2013-08-20 digitaljoel

为什么你需要把它放到script标签，你就不能编译模板一旦你得到它从ajax（负载）？ – dezman

人。我会研究这一点。将它放入脚本标签的好处是我可以使用'load（）'函数，并且完成了所有的工作，然后当我想稍后应用模板时，我就可以。为了现在编译它，我必须加载它有点不同（提供一个成功处理程序来手动加载和处理它），但这可能是答案... – digitaljoel

@Watson感谢您指出明显的解决方案。我偶尔只有javascript，所以有时我需要。把你的评论作为答案，我会接受它。 – digitaljoel

这里是我使用上述目的使用该功能：

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-26 23:02:20 dezman

谢谢。我来到了一个类似的解决方案。我会发布我的解决方案，但我仍然会接受你的回答，因为它指向了正确的方向。 – digitaljoel

您正在使用的类型，因为这

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

尝试改变类型

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

来源

2013-08-20 04:54:39

我没有加载JavaScript，我正在加载用作句柄模板的html内容，所以类型是正确的。 – digitaljoel

我喜欢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-27 03:27:34 digitaljoel

jQuery的加载内容到Firefox的脚本标记

回答

相关问题