Cannot get vars displayed in my ‘template’ using Handlebars.js correctly

1 Views

I have a Handlebars script that I am trying to get to iterate through an object to my ‘template’ below. Even though I can see the ‘badNodes’ in the object (an object when i do a console.log(row) it doesn’t ever pass to the template and all I see is a blank entry next to address in the view/template.

Can anyone suggest what I may have done wrong – P.S I am new to Handlebars.js

Read More
<script class="template" type="text/html">
    <div class="badNodesContainer">
        {{#row}}
        <div class="hash{{badNodes.hash}} help-tip">
            <p>
                <strong>Address: </strong>{{badNodes.address}}</br>
            </p>
        </div>
        {{/row}}
    </div>
</script>

// latter part of ajax request 

    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        //_.templateSettings.variable = "badNode";
        var source = $("script.template").html();
        var template = Handlebars.compile(source);

        $.each(checkinData, function (index, row) {
                row.badNodesHTML = "";
                var AB_action_login = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://asite.com/app/login.php?username=' + row.user + '&hash=' + row.signature + '"><i class="fa fa-external-link"></i> App</a>';
                if (row.postid == null) {
                    var AB_action_order = '<a class="btn btn-default btn-sm hidden" disabled="disabled" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
                } else {
                    var AB_action_order = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
                }
                row.AB_login = AB_action_login;
                row.AB_order = AB_action_order;
                row.AB_actions = AB_action_login + AB_action_order;

                if (row.badNodes.length) {
                    $.each(row.badNodes, function (idx, badNode) {
                        badNode.address.toString()
                        badNode.address = /:(.+)/.exec(badNode.address)[1];
                        row.badNodesHTML += template(badNode);
                        row.AB_actions;
                    });
                }
            }
        );
Post Views: 1

Related posts

1 comment

  1. You are accessing the object via #row inside your template even though the object you pass into the template looks like this:

    {
    hash: 'some hash',
    address: 'some address'
}

    So, in order to bind it try to access it by key instead like this:

    <script class="template" type="text/html">
    <div class="badNodesContainer">
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
    </div>
</script>

    Also, assuming that badNodes is an array of bad nodes, you could use each in your declaration when you pass row to the template directly. Try this:

    <script class="template" type="text/html">
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
</script>

    I suggest you prepare a javascript object that has the exact shape and form you would like and then pass it to the template. You are formatting the output in an $.each loop and pass each row individually which could get messy from an organizational perspective. Also, you are creating html inside your javascript for the button which you could put in the template as well. Then, all you have to do is pass one row object to the template that has all required information.

    A refactored version could look like this:

    <style media="screen">
    .btn-zabs {
        width:70px;
        text-align:left;
    }
</style>

<script type="text/javascript">
    .done(function (data, result, jqXHR) {
        var checkinData = JSON.parse(data).data;
        var rows = [];

        var source = $("script.template").html();
        var template = Handlebars.compile(source);
        var $container = $("#parent-of-badNodesContainer");

        $.each(checkinData, function (index, row) {
            if (row.badNodes.length) {
                $.each(row.badNodes, function (idx, badNode) {
                    badNode.address.toString()
                    badNode.address = /:(.+)/.exec(badNode.address)[1];
                });
            }
        });

        $container.html(template(checkinData));
    });
</script>

<script class="template" type="text/html">
    <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
    <div class="badNodesContainer">
        {{#each badNodes}}
        <div class="hash{{hash}} help-tip">
            <p>
                <strong>Address: </strong>{{address}}</br>
            </p>
        </div>
        {{/each}}
    </div>
    {{#if postid}}
        <a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{else}}
        <a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
    {{/if}}
</script>

    Note, I put the button templates in an arbitrary spot. I’m sure you would want to re-organize where they belong. This is for demonstration only.

Comments are closed.