Template composition fails with compiled templates using the jQuery.template( name, template ) method

[pagles]

I have mofified the example of "Example: Using {{tmpl}} to render hierarchical data." in http://api.jquery.com/template-tag-tmpl/ to highlight the issue:

test.html



<style>
table {float:left;clear:right;border-collapse:collapse;width:370px;background-color:#f8f8f8;margin:4px;} table td {border:1px solid blue;padding:3px;}
table th {font-weight:bold;border:2px solid blue;padding:1px;} table tbody {border:2px solid blue;} button {float:left;margin:4px;width:70px;}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="test.js"></script>

<table><tbody><tr><th>Title</th><th>Languages</th></tr></tbody>
<tbody id="movieList"></tbody></table>
<button id="foreignBtn">Foreign</button>
<button id="dramaBtn">Drama</button>

</body>
</html>

test.js
function getMovies( genre, skip, top ) {
$.ajax({
dataType: "jsonp",
url: "http://odata.netflix.com/Catalog/Genres('" + genre
+ "')/Titles?$format=json&$expand=Languages&$skip="
+ skip + "&$top=" + top,
jsonp: "$callback",
success: function( data ) {
var movies = data.d.results;
$( "#movieList" ).empty();
$.tmpl( movies, "#movieTemplate").appendTo( "#movieList" );
}
});
}

$(document).ready(function(){
    var movieTemplate = [
    "<tr>",
    "<td>${Name}</td>",
    "<td>{{tmpl(Languages.results) '#languageTemplate'}}</td>",
    "</tr",
    ].join("\n");

    var languageTemplate = "<em>${Name} </em>";

    $.template("movieTemplate", movieTemplate);
    $.template("languageTemplate", languageTemplate);

    $( "#foreignBtn" ).click( function() {
    getMovies( "Foreign", 0, 4 );
    });

    $( "#dramaBtn" ).click( function() {
    getMovies( "Drama", 0, 4 );
    });
})

The above will fail in firebug with: c.tmpl is not a function

[BorisMoore]

You have
{{tmpl(Languages.results) '#languageTemplate'}}
but your template is named "languageTemplate"

So use
{{tmpl(Languages.results) 'languageTemplate'}}

Please reopen if this was not the issue....

Thanks.

[pagles]

Changed it and got the same results. Current test.js :

$(document).ready(function(){
    var movieTemplate = [
    "<tr>",
    "<td>${Name}</td>",
    "<td>{{tmpl(Languages.results) 'languageTemplate'}}</td>",
    "</tr",
    ].join("\n");

    var languageTemplate = "<em>${Name} </em>";

    $.template("movieTemplate", movieTemplate);
    $.template("languageTemplate", languageTemplate);

    $( "#foreignBtn" ).click( function() {
    getMovies( "Foreign", 0, 4 );
    });

    $( "#dramaBtn" ).click( function() {
    getMovies( "Drama", 0, 4 );
    });
})

[pagles]

Seems I can't reopen a closed issue, I 'll have to open a new one I guess.