Как использовать pager.js для URL-истории в SPA на основе нокаутирующего компонента?

Question

Я сделал СПА с Нокаутом и JQuery.Страница состоит из компонентов, зарегистрированных через Require.У меня есть различные виды компонентов, таких как просмотр страницы и более конкретные компоненты, такие как панель поиска.

Я не использую ссылки для изменения представлений, но у меня есть эта логика в index.html для загрузки в разные представления / HTML:

<ul class="navbar-nav mr-auto" data-bind="foreach: menuItems">
            <!-- <li class="nav-item" data-bind="css: $parent.isActive($data)">-->
            <a href="#" class="nav-link" data-bind="click: $parent.changeMenu">
                <span class="myMenuItem" data-bind="text: name, page-href: name"></span>
            </a>
            <!--</li>-->
</ul>

<div data-bind="component: { name: selectedComponent, params: selectedParams}"></div>

ИтакЯ могу нажать NavLink для изменения меню.Потому что changeMenu меняет выбранный компонент.Это выполняется в моем основном приложении:

 var menuItems = [
    { name: 'Home ?', component: 'home-view' },
    { name: 'MyPage ?', component: 'my-page-view' },
    { name: 'Post ?', component: 'single-post' },
    { name: 'Log In ?', component: 'login-view' }

];

var selectedMenu = ko.observable(menuItems[0]);
var selectedComponent = ko.observable('home-view');
var selectedParams = ko.observable({});

var changeMenu = function (menu) {
    selectedMenu(menu);
    selectedComponent(menu.component);
};

Я хочу, чтобы pager.js был частью этой структуры, но примерно через 8 часов просмотра и тестирования примеров API pager.js я все еще не нашелспособ сделать это.

<a data-bind="page-href: name"></a>

Это внутри цикла foreach menuItems создает ссылки после имени компонента, но содержимое не изменяется.Что имеет смысл, потому что он не запускает метод changeMenu.Так что моя лучшая «логика» говорит мне, что, возможно, я могу каким-то образом объединить эту строку с:

<a href="#" class="nav-link" data-bind="click: $parent.changeMenu">

Если это невозможно, тогда можно связать ссылки с различными представлениями компонентов.Поэтому, когда мой вид домашней страницы успешно загружен, привязка хеш-страницы изменяется.

Примером компонента на данный момент является мой компонент myPage:

view:

 <h3>MyPage</h3>
<h4>Favorites:</h4>
<favorites-list></favorites-list>
<h4>History:</h4>
<history-list-view></history-list-view>

Представление содержит компонент с view-list-view.А у этого есть модель представления с логикой для извлечения данных.

viewModel:

    define(['knockout', 'dataService', 'postman'], function (ko, ds, postman) {
    return function (params) {
        var histories = ko.observableArray([]);
        var favorites = ko.observableArray([]);
        var favoriteNext = ko.observable();
        var favoritePrev = ko.observable();
        var currentUser = ko.observable();

        var currentComponent = ko.observable("history");
        var favoritesComponent = ko.observable("favorite");

        postman.subscribe("user", function (user) {
            currentUser(user.Username);
        });

        var getUserInformation = function () {
            ds.getUser(function (data) {
                histories(data[1]); 
            }, currentUser());
        };

        var getUserFavorites = function () {
            ds.getFavorites(function (data) {
                favorites(data.items);
                favoriteNext(data.next);
                favoritePrev(data.Prev);
            }, currentUser());
        }

        postman.publish("needUserData");
        getUserInformation();
        getUserFavorites();

        return {
            histories,            
            currentComponent,
            favoritesComponent,
            favorites
        };
    };

});

Для извлечения данных используется моя служба данных:

var getUser = function (callback, user) {
    $.getJSON('api/user/myPage/' + user, function (data) {
        callback(data);
    });
};

Этоэто моя первая попытка спросить у вас ответы, и я надеюсь, что что-то имеет смысл.Я просто не могу понять API об асинхронной части по отношению к компонентному способу структурирования нокаутирующего SPA.Это то, что мне нужно, или я должен идти в совершенно новом направлении?

https://pagerjs.com/demo/#!/navigation/async/ok

Кстати, я запустил пейджер следующим образом:

    require(['knockout', 'app', 'pager'], function (ko, app, pager) {

    pager.extendWithPage(app);
    ko.applyBindings(app);
    pager.start();
});

Все установлено правильно, так как я могу использовать простые примеры кода, но основнойВопрос в том, можно ли реализовать Pager.js через это меню на основе компонентов?

ОБНОВЛЕНИЕ 16/01/2019

У меня все еще проблемы, но я думаю, что понял, что мне нужно иметь страницы, подобные этой, в моем index.html для каждого компонента страницы:

<div data-bind="page: {
              id: 'homePage',
              title: 'HomePage',
              withOnShow:  requireVM('vm/navigation/async'),
              desc: 'page with searchbar',
              scrollToTop: true,
              sourceCache:  true,
              sourceOnShow: 'page/homePage'}"

Я не понимаю, как использовать параметр withOnShow, но вижу, что это способ показать, какую модель представления я буду использовать?

Я пытался сделать viewModel вдохновленным demo.js из API https://pagerjs.com/demo/

  define(['jquery', 'knockout', 'dataService', 'postman', 'jqcloud'], function ($, ko, ds, postman) {
    var searchString = ko.observable();
    var vm = {
        test: "Pelle",
        // wait 2 secs before returning ok
        wait2: function () {
            var d = $.Deferred();
            setTimeout(function () {
                d.resolve();
            }, 2000);
            return d;
        },
        wait2Fail: function () {
            var d = $.Deferred();
            setTimeout(function () {
                d.reject();
            }, 2000);
            return d;
        },
        okIsLoading: ko.observable(),
        notOkIsLoading: ko.observable()

    };

    return {
        getVM: function() {
            return vm;
        }, searchString
    };

});

Но при вызове страницы так, как они делают здесь:

 <a class="btn" data-bind="click: $page.homePage(wait2,'ok','notok',okIsLoading)">
    Show OK page after 2 secs
    <!-- ko if: (okIsLoading() == 'pending') -->
    <img src="small-ajax-loader.gif"/>
    <!-- /ko -->
</a>

Я получаю «knockout.debug.js: 3391 Uncaught ReferenceError: Невозможно обработать привязку» click: function () {return $ page.homePage (wait2, 'ok', 'notok', okIsLoading)} "Сообщение:$ page не определен "

API ничего не говорит о том, как определить $ page, если он не дает странице идентификатор?