Loading Handlebars.js Template From External Html File Shows Nothing

This question is a bit of a stretch of my JS skills, so I might explain it like an idiot. Here is my JavaScript to get the json from the server, and try to push it into a template:

Solution 1:

You need to call template with the data returned from getClient. In you example the argument to showAllClients is shadowed by the argument in the success callback because you use the same name (data). Change the argument name in showAllClients to something else, and pass it to the template function.

(function () {

        //list of clientsvar 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 the template you need to refer to this inside the each block:

<divid="clients">
    {{#each client}}
                <spandata-id="{{this.id}}"><div><p>{{this.iD}}</p><p>{{this.name}}</p>
                     ...
                    </div>
        {{/each}}
</div>

In your example you use nested iterators, which I'm not sure is supported. Please read How do I use nested iterators with Mustache.js or Handlebars.js? or Ember.js / Handlebars nested each iterations for a different approach.