mengshuaiyang
commented
7 years ago 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
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
content of main.js
I would greatly appericate it if you tell me how I can make the example above work with pagination.