possible full example of handlebar.js ? #27

medyagh · 2017-01-08T04:42:12Z

This is a great tool I am loving it, so thank you. however I have been banging my head to the wall for so many hours I just can not make it work with handlebar.

is it possible to post a full example of handlebar ? the psudo code in the readme is missing something. I keept getting all kind of errors. specially when I pass a data kind of dictionary.

here is the basic example of handlebar (bellow) which I wanna make it work with pagination.

content of index.html

<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <script src="jquery-3.1.1.min.js"></script>
    <script src="handlebars-v4.0.5.js"></script>
</head>
<body>
    <h1>Handlebars JS Exampldsdasdsadsae</h1>
    <script id="some-template" type="text/x-handlebars-template">
        <table>
            <thead>
                <th>Name</th>
                <th>Job Title</th>
                <th>Twitter</th>
            </thead>
            <tbody>
                {{#users}}
                <tr>
                    <td>{{fullName person}}</td>
                    <td>{{jobTitle}}</td>
                    <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>
                </tr>
                {{/users}}
            </tbody>
        </table>
    </script>

    <script src="main.js"></script>

    <body>
</html>

content of main.js

var source = $("#some-template").html();
var template = Handlebars.compile(source);

var data = {
    users: [ {
        person: {
            firstName: "Garry",
            lastName: "Finch"
        },
        jobTitle: "Front End Technical Lead",
        twitter: "gazraa"
    }, {
        person: {
            firstName: "Garry",
            lastName: "Finch"
        },
        jobTitle: "Photographer",
        twitter: "photobasics"
    }, {
        person: {
            firstName: "Garry",
            lastName: "Finch"
        },
        jobTitle: "LEGO Geek",
        twitter: "minifigures"
    } ]
};

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

$('body').append(template(data));

I would greatly appericate it if you tell me how I can make the example above work with pagination.

The text was updated successfully, but these errors were encountered:

mengshuaiyang · 2017-03-20T06:23:16Z

Changes like this:

content of index.html

<html>
<head>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.0.7/pagination.css" />
    <script src="jquery-3.1.1.min.js"></script>
    <script src="handlebars-v4.0.5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.0.7/pagination.js"></script>
</head>
<body>
    <h1>Handlebars JS Exampldsdasdsadsae</h1>
    <div class="data-container"></div>
    <div id="pagination"></div>
    <script id="some-template" type="text/x-handlebars-template">
        <table>
            <thead>
                <th>Name</th>
                <th>Job Title</th>
                <th>Twitter</th>
            </thead>
            <tbody>
                {{#users}}
                <tr>
                    <td>{{fullName person}}</td>
                    <td>{{jobTitle}}</td>
                    <td><a href="https://twitter.com/{{twitter}}">@{{twitter}}</a></td>
                </tr>
                {{/users}}
            </tbody>
        </table>
    </script>

    <script src="main.js"></script>

    <body>
</html>

content of main.js

var source = $("#some-template").html();
var template = Handlebars.compile(source);

var data = {
    users: [ {
        person: {
            firstName: "Garry",
            lastName: "Finch"
        },
        jobTitle: "Front End Technical Lead",
        twitter: "gazraa"
    }, {
        person: {
            firstName: "Garry",
            lastName: "Finch"
        },
        jobTitle: "Photographer",
        twitter: "photobasics"
    }, {
        person: {
            firstName: "Garry",
            lastName: "Finch"
        },
        jobTitle: "LEGO Geek",
        twitter: "minifigures"
    } ]
};

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

$('body').append(template(data));

$('#pagination')
                .pagination({
                    dataSource: data.users,
                    pageSize: 2,
                    callback: function(data, pagination) {
                        var dataHtml = template({ users: data });
                        $('.data-container').html(dataHtml);
                    }
                });

@medyagh

superRaytin closed this as completed Nov 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

possible full example of handlebar.js ? #27

possible full example of handlebar.js ? #27

medyagh commented Jan 8, 2017 •

edited

mengshuaiyang commented Mar 20, 2017

possible full example of handlebar.js ? #27

possible full example of handlebar.js ? #27

Comments

medyagh commented Jan 8, 2017 • edited

mengshuaiyang commented Mar 20, 2017

medyagh commented Jan 8, 2017 •

edited