Ошибка при загрузке шаблонов jsrender через AJAX

Question

Я пытаюсь написать функцию для загрузки шаблонов во внешние файлы и использовать их с 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, но это все еще мешает мне продолжать, и я был бы признателен за любую помощь.

Answer 1

Так что я сам столкнулся с этой же ошибкой (при попытке использовать внешние шаблоны с jsrender, с дополнительным требованием загрузки локальных файлов (то есть я не использую какой-либо серверный код)).

К сожалению, в статье MSDN, на которую вы ссылаетесь (и на которую я пошел изначально, прежде чем наткнуться на это), и на принятый ответ " Сохранить шаблон jsRender в отдельном файле js", обе рекомендуют использовать $.get(), но вы должны использовать $.ajax() как для параметра async, так и для параметра dataType, как описано ниже.

Вот как я заставил это работать:

1. Используемый $.ajax() а также async: false (что вы сделали в приведенном выше примере, за исключением того, что вы неправильно написали async как aysnc).
2. Установить 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()
        );
    }
});

Надеюсь, что это поможет кому-то еще в будущем.

Answer 2

Возможно, что метод $.templates() изменился со времени написания упомянутой статьи msdn. Вы уже смотрели на Сохранить шаблон jsRender в отдельном файле js