通过加载AJAX jsrender模板时出错 [英] Error when loading jsrender templates through AJAX

问题描述

我想编写一个函数来加载外部文件模板，并利用它们与 jsrender 。不过，我收到此错误：

I am trying to write a function to load templates in external files and use them with jsrender. However, I am getting this error:

TypeError: elem.getAttribute is not a function
[Break On This Error]   

value = $templates[elem.getAttribute(tmplAttr)];

我有一些 console.logs 显示该模板检索与阿贾克斯。

I have some console.logs showing that the template was retrieved with ajax.

基本code导致的错误如下：

The basic code that causes the error is as follows:

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（路径）; 但我不明白什么可能是错误的。

The error is in jsrender.js (line 829) and I think it's concerning the $.templates(path); but I don't understand what could be wrong.

下面是一个链接到该项目的zip： http://sdrv.ms/QsZpQT

Here is a link to a zip of the project: http://sdrv.ms/QsZpQT

我根据我对这篇文章的功能： http://msdn.microsoft.com/en-us/magazine/hh975379.aspx

I based my function on this article: http://msdn.microsoft.com/en-us/magazine/hh975379.aspx

我不知道这是否是jsRender在所有相关的，但它仍然是持续阻止我，我会AP preciate任何帮助。

I'm not sure if this is jsRender related at all but it still is blocking me from continuing and I would appreciate any help.

推荐答案

所以，我只是碰到了同样的错误，我（想使用外部的模板与jsrender的时候，用加载本地文件的附加要求（意思是，我中号没有使用任何服务器端code））。

So I just ran into this same error, myself (when trying to use external templates with jsrender, with the additional requirement of loading local files (meaning, I'm not using any server-side code)).

不幸的是，你链接到（那我去最初，跌跌撞撞到这之前）MSDN文章和接受的答案为<一个href="http://stackoverflow.com/questions/10413894/store-a-jsrender-template-in-a-separate-js-file">Store在一个单独的js文件一个jsRender模板，无论是推荐使用 $。获得（），但你必须使用 $。阿贾克斯（）既为async参数和dataType参数，如下所述。

Unfortunately the MSDN article you link to (and that I went to initially, before stumbling onto this) and the accepted answer to Store a jsRender template in a separate js file, both recommend to use a $.get(), but you have to use $.ajax() both for the async parameter, and the dataType parameter, as explained below.

下面就是我得到了它的工作：

Here's how I got it to work:

1. 使用 $阿贾克斯（）和异步：假（你没有在上面的例子中，除了你拼写错误的异步为aysnc）。
2. 将数据类型：文本参数Ajax调用。这部分是关键 - 当我离开了具体的数据类型PARM，模板内容返回一个 [对象的XMLDocument] ，其中 $模板哽咽。

1. Used $.ajax() and async: false (which you did in the example above, except you misspelled 'async' as 'aysnc').
2. Set the dataType: 'text' parameter to the ajax call. This part was key -- when I left out the dataType parm, the template contents returned as an [object XMLDocument], which $.templates choked on.

所以最后code片段，结束了工作看起来是这样的：

So the final code snippet that ended up working looks like this:

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

希望这有助于别人的路线。

Hope this helps somebody else down the line.

这篇关于通过加载AJAX jsrender模板时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！