How to add KnockoutJS Plugin to Magento2?

Question

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();
        }
    });
});

Answer 1

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();
        }
    });
});