Goal: Add pager.js. pager.js is a JavaScript library based on KnockoutJS and jQuery that provides the possibility of creating single page applications in a declarative fashion - nesting subpages inside subpages where each subpage can be developed standalone but still communicate between each other.
Setup Instructions says to do
// extend your view-model with pager.js specific data
pager.extendWithPage(viewModel);
// apply the view-model using KnockoutJS as normal
ko.applyBindings(viewModel);
// start pager.js
pager.start();
Magento Files
I saved pager.js inside my module and added mapping to My_Module/view/frontend/requirejs-config.js
:
var config = {
paths: {
"pager": "My_Module/js/pager"
}
};
My_Module/view/frontend/templates/index.phtml
:
<div data-bind="scope: 'myapp'">
<!-- ko template: getTemplate() --><!-- /ko -->
</div>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"myapp": {
"component": "My_Module/js/myapp",
"template" : "My_Module/myapp"
}
}
}
}
}
</script>
My_Module/view/frontend/web/template/myapp.html
<div data-bind="page: {id: 'deep_navigation'}">
container
<div data-bind="page: {id: 'start'}">
start page
<a href="#!/second">Show the second page</a>.
</div>
<div data-bind="page: {id: 'second'}">
second page
<a href="#!/start">Go back to the first sub page</a>.
</div>
</div>
My_Module/view/frontend/web/js/myapp.js
to require pager and initialize it.
define(['uiComponent', 'ko', 'pager'], function(Component, ko, pager) {
return Component.extend({
initialize: function () {
this._super();
// extend your view-model with pager.js specific data
pager.extendWithPage(this);
// apply the view-model using KnockoutJS as normal
ko.applyBindings();
// start pager.js
pager.start();
}
});
});