Carregando template handlebars.js do arquivo html externo não mostra nada

Question

Oct 25, 2012, 08:42 PM

Carregando template handlebars.js do arquivo html externo não mostra nada

Esta questão é um pouco de minhas habilidades JS, então eu poderia explicar isso como um idiota.

Aqui está o meu JavaScript para obter o json do servidor e tentar empurrá-lo para um modelo:

    //Server Interface Start
//Access the web api for The User:
var lucidServer = (function () {
    //global error handler
    $(document).ajaxError(function (event, xhr) {
        alert(xhr.status + " : " + xhr.statusText);
    });
    //client Calls
    var getClients = function (id) {
        return $.ajax(clientUrl + "/list/" + id)
    };
    var getClient = function (id) {
        return $.ajax(clientUrl + "/details/" + id)
    };

    //push them out to the world!
    return {
        getClients: getClients,
        getClient: getClient,
    };
}());
//Server Interface End

(function () {
    //list of clients
    var refreshClients = function () {
        lucidServer.getClients(1).done(showAllClients);
    };
    var showAllClients = function (templateInput) {
        var source;
        var template;
        var path = '../Templates/indexTemplates.html'
        $.ajax({
            url: path,
            cache: true,
            success: function (data) {
                source = data;
                template = Handlebars.compile(source);
                $('#clientListOutput').html(template(templateInput));
            }
        });
    };
    $(function () {
        refreshClients();
    });
}());

GetClients funciona bem e retorna os dados do Json que estou esperando. Quando inspeciono o templateInput, ele mostra o que eu espero.

Aqui está o modelo externo:

<script id="clientList" type="text/html">

<div id="clients">
    {{#each client}}
                <span data-id="{{this.iD}}" />
    <div>
        <p>{{this.iD}}</p>
        <p>{{this.name}}</p>
    </div>
    {{/each}}
</div>
</script>

O que eu pretendo fazer é manter todos os meus modelos em um arquivo html que eu possa chamar por id de script, ou ter cada modelo como seu próprio arquivo que eu possa chamar. Quando eu executo esta página nada está aparecendo, não há erro ou qualquer coisa. Aqui está a página inteira do índice:

    <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="../../Content/normalize.css">
    <link rel="stylesheet" href="../../Content/main.css">
    <script src="../../scripts/libs/modernizr-2.6.2.min.js"></script>
</head>
<body>
    <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->
    <section id="Application">
        <div id="clientListOutput">
        </div>
        <div id="clientCreateOutput">
        </div>
    </section>
    <footer>
    </footer>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../scripts/libs/jquery-1.8.2.min.js"><\/script>')</script>
    <script src="../../scripts/plugins.js"></script>
    <script src="../../scripts/main.js"></script>
    <script type="text/javascript" src="../../Scripts/libs/handlebars.js"></script>
    <script>
        var freelancerUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Freelancer"})';
        var clientUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Client"})';
        var projectUrl = '@Url.RouteUrl("ApiControllerAction", new { httproute="", controller = "Project"})';
        var storyUrl = '@Url.RouteUrl("ApiControllerAndIntegerId", new { httproute="", controller = "Story"})';
    </script>
    <script type="text/javascript" src="../../Scripts/serverInterface.js"></script>
</body>
</html>

Editar

Eu mudo a maneira como o meu modelo parece um pouco. Através da depuração do js nas ferramentas do Chrome, ele está me dizendo que 'data' é indefinido na linha de sucesso do ajax em showallclients.