jQuery将内容加载到firefox中的脚本标签中
[英]jquery load content into script tag in firefox
问题描述
我有一个使用jquery 1.7.2的html页面。 在页面中，我有一个类似的代码标签。
<script id="navigation-template" type="text/x-handlebars-template"></script>
在页面的下方，我使用javascript使用以下功能将车把模板加载到script标签中：
loadTemplate: function( templateId, elementId ) {
if ( !elementId ) {
elementId = templateId;
}
$('#'+elementId).load('/my/path/templates.html #'+templateId);
}
在chrome，eclipse浏览器甚至IE 9中都可以正常工作，但在Firefox中似乎无法实现。
我已经调试，并且加载调用成功完成并且返回了内容，但是对$('#navigation-template').html()的调用给出了一个空字符串。
我在script标记中也有内容，并调用了load，然后在.load调用后看到它已被空字符串替换。
最后，如果我手动执行$('#navigation-template').html( "hello" ); 我看到脚本标记的.html()已更改。
如果我使用简单的ajax get，那么我将不得不解析它并获取给定的元素，而不是依靠负载来为我获取元素。
我如何在Firefox中解决此问题？
3 个解决方案
解决方案1
1 已采纳 2013-08-26 23:02:20
这是我用于此类目的的功能：
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
0 2013-08-20 04:54:39
您正在使用这种类型
<script id="navigation-template" type="text/x-handlebars-template"></script>
尝试将类型更改为
<script id="navigation-template" type="text/javascript"></script>
解决方案3
0 2013-08-27 03:27:34
我对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
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.