Laden handlebars.js Vorlage von externen html-Datei zeigt nichts

Diese Frage ist ein bisschen weit hergeholt, meine JS Fähigkeiten, so könnte ich es erklären, wie ein idiot.

Hier ist mein JavaScript, um die json vom server, und versuchen Sie, schieben es in eine Vorlage:

    //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 funktioniert einwandfrei und liefert die Json-Daten, die ich erwarte. Wenn ich überprüfen das templateInput es zeigt, was ich erwarte.

Hier ist die externe Vorlage:

<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>

Was ich bin letztendlich zu dem Ziel zu tun ist, halten Sie entweder alle meine Vorlagen in einer html-Datei, die ich aufrufen kann, indem Skript-id, oder jede Vorlage eine eigene Datei, die ich aufrufen kann. Wenn ich auf dieser Seite nichts angezeigt, es gibt keine Fehlermeldung oder irgendetwas. Hier ist die gesamte index-Seite:

    <!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>

Bearbeiten

Ich verändert die Art, wie mein template sieht etwas. Debugging das js im Chrome-tools ist es mir zu sagen, dass 'Daten' ist nicht definiert in der ajax-Erfolg-Linie innerhalb showallclients.

InformationsquelleAutor ledgeJumper | 2012-10-25

5

Müssen Sie rufen Sie die Vorlage mit den Daten zurückgegeben, die von getClient. In Sie Beispiel das argument showAllClients ist überschattet von der Argumentation in der Erfolgs-callback, weil Sie den gleichen Namen verwenden (Daten). Ändern Sie das argument name in showAllClients, um etwas anderes, und übergeben es an die template-Funktion.
```
(function () {

        //list of clients
        var refreshClients = function () {
           $.when(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();
        });
    }());
```
EDIT:

In der Vorlage finden Sie this innerhalb der einzelnen Blocks:
```
<div id="clients">
    {{#each client}}
                <span data-id="{{this.id}}">
                    <div>
                        <p>{{this.iD}}</p>
                        <p>{{this.name}}</p>
                     ...
                    </div>
        {{/each}}
</div>
```
In Ihrem Beispiel verwenden Sie geschachtelte Iteratoren, die ich bin mir nicht sicher unterstützt wird. Bitte Lesen Sie Wie kann ich mit geschachtelten Iteratoren mit Mustache.js oder Handlebars.js? oder Ember.js /LENKER verschachtelt die einzelnen Iterationen für einen anderen Ansatz.

Dies ist mir dieser Fehler: ReferenceError: templateInput ist nicht definiert
Sie wahrscheinlich benötigen, um wickeln Sie den Aufruf lucidServer in einem, wenn auch, siehe edits oben und api.jquery.com/jQuery.when
Guter Ruf auf dem .wenn, macht Sinn. Aber es ist immer noch nicht gerendert alles. Irgendwelche Ideen?
In diesem Fall müssen Sie, um Debuggen zu starten. Haben Sie versucht, festlegen Sie einen Haltepunkt in der Erfolgs-callback und stellen Sie sicher, dass die templateInput ist als erwartet, und dass die richtige Vorlage zurückgegeben wird, etc. Sie können getfirebug.com oder Chrome developer tool, um die Haltepunkt. Weitere Informationen unter: odetocode.com/blogs/scott/archive/2012/03/13/...
Ja, ich bin Graben in den chrome dev tools jetzt. Es scheint, wie es nicht einmal in den Funktionen überhaupt, nur auslassen über Sie, und ich bin immer eine Menge von anderen Fehlern

InformationsquelleAutor ebaxt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.