not_inline.html


<!DOCTYPE html>
<html>
    <head>
        <style>
            table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; }
            table td { height:30px; width:100px; border:1px solid blue; padding:3px; }
        </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>
            var movies = [
            { Name: "The Red Violin", ReleaseYear: "1998", Director: "Françs Girard" },
            { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
            { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
            ];
            
            $(function() {
                $.get('template.html', function(tmpl) {
                    var output = $.tmpl(tmpl, movies);

                    $('#showBtn').click(function(e) {
                        e.preventDefault();
                        output.appendTo('#moviesList');
                    });
                });
            });
        </script>

    </head>
    <body>
        <button id="showBtn">Show movies</button><br/>
        <table><tbody id="moviesList"></tbody></table>
    </body>
</html>