通过AJAX加载jsrender模板时出错

时间:2012-09-22 01:00:16

标签: javascript ajax jsrender

我正在尝试编写一个函数来加载外部文件中的模板,并将它们与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有关,但它仍然阻止我继续,我将不胜感激任何帮助。

2 个答案:

答案 0 :(得分:2)

所以我只是遇到了同样的错误,我自己(当尝试使用jsrender的外部模板时,还需要加载本地文件(意思是,我没有使用任何服务器端代码))。

不幸的是,您链接到的MSDN文章(以及我最初访问过的文章)以及Store a jsRender template in a separate js file的已接受答案,都建议使用$.get(),但您必须使用$.ajax()用于async参数和dataType参数,如下所述。

以下是我如何使用它:

  1. 使用$.ajax()async: false(您在上面的例子中做过,除了拼错'async'为'aysnc')。
  2. dataType: 'text'参数设置为ajax调用。这部分很关键 - 当我省略dataType parm时,模板内容返回为[object XMLDocument]$.templates被阻塞。
  3. 所以最终完成工作的最终代码片段如下所示:

    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