我正在尝试编写一个函数来加载外部文件中的模板,并将它们与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(路径)有关; 但我不明白可能出现的问题。
这是项目zip的链接: http://sdrv.ms/QsZpQT
我的功能基于这篇文章: http://msdn.microsoft.com/en-us/magazine/hh975379.aspx
我不确定这是否与jsRender有关,但它仍然阻止我继续,我将不胜感激任何帮助。
答案 0 :(得分:2)
所以我只是遇到了同样的错误,我自己(当尝试使用jsrender的外部模板时,还需要加载本地文件(意思是,我没有使用任何服务器端代码))。
不幸的是,您链接到的MSDN文章(以及我最初访问过的文章)以及Store a jsRender template in a separate js file的已接受答案,都建议使用$.get()
,但您必须使用$.ajax()
用于async参数和dataType参数,如下所述。
以下是我如何使用它:
$.ajax()
和async: false
(您在上面的例子中做过,除了拼错'async'为'aysnc')。dataType: 'text'
参数设置为ajax调用。这部分很关键 - 当我省略dataType parm时,模板内容返回为[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()
);
}
});
希望这有助于其他人。
答案 1 :(得分:0)
自写入引用的msdn文章以来,$ .templates()方法可能已更改。你有没看过Store a jsRender template in a separate js file