JQuery template: async template loading?

Can I use jquery template w开发者_开发技巧ithout having to have all the templates (text/x-jquery-tmpl) in the page but loaded 'on demand' via ajax?

I'm trying with a custom tag, but I do not have the desired results:

function loadTemplate(template, data){

                var html;

                $.ajax({
                    url: "/widgets/"+template,
                    async : false,
                    success: function(result){
                        html = $(result).tmpl(data).html();

                    }
                });


                return html;
            }

function extendTmpl() {


        $.extend(jQuery.tmpl.tag, {
            'atmpl': {
                _default: { $1: "null", $2: "null" },
                open: '_=_.concat(loadTemplate($1, $2));'
            },
        });

}

According to the documentation $(element).tmpl() takes the first element in the matched set and renders its content, i.e:

$('<span>hello</span>').tmpl() // => "hello"

The result is simply a text node without the span. On the opposite:

$.tmpl('<span>hello</span>') // => "<span>​hello​</span>​"

You can either use this latter syntax or wrap your result in an empty <div> before processing: $(<div>).append(result).tmpl(...)