我正在尝试编写一个函数来加载外部文件中的模板并将其与 jsrender
一起使用。但是,我收到此错误:
TypeError: elem.getAttribute is not a function
[Break On This Error]
value = $templates[elem.getAttribute(tmplAttr)];
我有一些 console.logs
显示模板是通过 ajax 检索的。
导致错误的基本代码如下:
var path = 'templates/myTemplate.tmpl.html';
var data = searchResultTeasers;
var target = $('#results');
$.ajax({
url : path,
aysnc : false,
success : function(template) {
console.log("Path", path);
console.log("Template", template);
console.log("Data", data);
//=============================================
// Save Template with url as name for future
//=============================================
$.templates(path, template);
//=============================================
// Get Template String
//=============================================
var templateString = $.templates(path);
//=============================================
// Render Template
//=============================================
renderedTemplate = templateString.render(data);
target.html(renderedTemplate);
}
});
错误出现在 jsrender.js (第 829 行)中,我认为它与 $.templates(path); 有关 但我不明白可能出了什么问题。
以下是该项目 zip 的链接: http://sdrv.ms/QsZpQT
我的函数基于这篇文章: http://msdn.microsoft.com/en-us/magazine/hh975379.aspx
我不确定这是否与 jsRender 相关,但它仍然阻止我继续,我将不胜感激。
最佳答案
所以我自己也遇到了同样的错误(当尝试将外部模板与 jsrender 一起使用时,还需要加载本地文件(这意味着我没有使用任何服务器端代码))。
不幸的是,您链接到的 MSDN 文章(在偶然发现这一点之前我最初访问过该文章)以及 Store a jsRender template in a separate js file 的接受答案,两者都建议使用 $.get()
,但您必须对 async 参数和 dataType 参数使用 $.ajax()
,如下所述.
这是我如何让它工作的:
- 使用了
$.ajax()
和async: false
(您在上面的示例中就是这样做的,只是您将“async”错误拼写为“aysnc”)。< - 将
dataType: 'text'
参数设置为 ajax 调用。这部分是关键——当我省略 dataType 参数时,模板内容作为[object XMLDocument]
返回,$.templates
被阻塞。
因此最终运行的代码片段如下所示:
var file = 'views/my_template_file.html';
$.ajax({
url: file,
async: false,
dataType: 'text',
success: function(contents) {
$.templates({my_template: contents});
$('#myDiv').html(
$.render.my_template()
);
}
});
希望这对其他人有帮助。
关于javascript - 通过AJAX加载jsrender模板时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12539832/