0

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();
        }
    });
});
0
define(['uiComponent', 'ko', 'pager'], function(Component, ko, pager) {
    return Component.extend({
        initialize: function () {
            this._super();

            // viewModel is `this`
            pager.extendWithPage(this);

            // delete this
            // magento2 doing it automatically
            // ko.applyBindings();

            // start pager.js
            pager.start();
        }
    });
});
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.