admin管理员组

文章数量:1296257

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:

    //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 = Handlebarspile(source);
                $('#clientListOutput').html(template(templateInput));
            }
        });
    };
    $(function () {
        refreshClients();
    });
}());

GetClients works fine and returns the Json data I am expecting. When I inspect the templateInput it is showing what I expect.

Here is the external template:

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

What I am ultimately aiming to do is hold either all my templates in one html file that I can call by script id, or have each template be its own file that I can call. When I run this page nothing is showing up, there's no error or anything. Here is the entire index page:

    <!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="/">upgrade your browser</a> or <a href="/?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/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>

Edit

I changes the way my template looks slightly. Through debugging the js in Chrome tools it is telling me that 'data' is undefined in the ajax success line within showallclients.

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:

    //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.pile(source);
                $('#clientListOutput').html(template(templateInput));
            }
        });
    };
    $(function () {
        refreshClients();
    });
}());

GetClients works fine and returns the Json data I am expecting. When I inspect the templateInput it is showing what I expect.

Here is the external template:

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

What I am ultimately aiming to do is hold either all my templates in one html file that I can call by script id, or have each template be its own file that I can call. When I run this page nothing is showing up, there's no error or anything. Here is the entire index page:

    <!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./">upgrade your browser</a> or <a href="http://www.google./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./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>

Edit

I changes the way my template looks slightly. Through debugging the js in Chrome tools it is telling me that 'data' is undefined in the ajax success line within showallclients.

  • javascript
  • html
  • handlebars.js
  • mustache
Share Improve this question edited Dec 11, 2018 at 23:30 halfer 20.5k19 gold badges109 silver badges202 bronze badges asked Oct 25, 2012 at 18:42 ledgeJumperledgeJumper 3,63014 gold badges47 silver badges92 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 5

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 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.pile(source);
                    $('#clientListOutput').html(template(templateInput));
                }
            });
        };

        $(function () {

            refreshClients();
        });
    }());

EDIT:

In the template you need to refer to this inside the each block:

<div id="clients">
    {{#each client}}
                <span data-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.

本文标签： javascriptLoading handlebarsjs template from external html file shows nothingStack Overflow

版权声明：本文标题：javascript - Loading handlebars.js template from external html file shows nothing - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741633233a2389489.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。