PagerJS how to accomplish "two-way binding" with URL params?

knockout.js, pagerjs

Solution

Disclaimer: I don't know anything about pager.js, but I'm hoping my general knockout experience can still be of help.

Looking at the example, the `page` binding seems to create observables using initial values from the url. My first instinct would be to extend this binding and make sure a subscription to each of these values updates the URL.

Let's name this binding `twoway-page`:

ko.bindingHandlers["twoway-page"] = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    // Call pager.js' page binding
    ko.bindingHandlers.page.init(element, valueAccessor, allBindings, viewModel, bindingContext);

    // ...
  }
}

And call it on the example's binding:

<div data-bind="twoway-page: {
                  id: 'start', 
                  params: ['first','last']
                 }">

After calling `page.init`, the page binding has extended the viewmodel, adding the observables defined in the `params` array to the `viewModel` object. This means we can subscribe to changes in these observables.

The next challenge is computing the right hash. I looked up how the `page-href` binding computes its `href` attribute. Turns out it uses `pager.page.path()` on an object with a `path` and `params` property. E.g.:

var hash = pager.page.path({
  path: "user",
  params: {
    "first": "John",
    "last": "Doe"
  }
});

I tried to construct a similar object in a computed observable.

// ... 
var options = valueAccessor();
var pathObj = ko.computed(function() {

    var result = {
        path: options.id,
        params: {}
    };

    options.params.forEach(function(param) {
        result.params[param] = viewModel[param]();
    });

    return result;
}).extend({ rateLimit: { timeout: 200, method: "notifyWhenChangesStop" } });

I couldn't find a "clean" way to update the hash via a pager.js method, but I did notice that internally, pagerjs uses `location.hash = "newhash"` to set a value (although there also seems to be a history/html5 alternative...). Anyway, we can subscribe to our observable to update the hash:

// ...
pathObj.subscribe(function(newValue) {
    location.hash = pager.page.path(newValue);
});

Now, instead of the `text` bindings from the example, we'll use `textInput` bindings so we can update the values:

<div>
  <span>First name:</span>
  <input type="text" data-bind="textInput: first">
</div>

So, to wrap up: my best guess would be to

- Extend an existing pager.js binding

- Create subscriptions to all observables that need to be updated in the URL

- Automatically update the hash when values change; use a `rateLimit` extension to prevent an overload of updates

Doing stuff with the location hash is a bit hard to show in a fiddle, so I've recorded a gif of my proof of concept:

The complete custom binding code is:

ko.bindingHandlers["twoway-page"] = {
    init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.page.init(element, valueAccessor, allBindings, viewModel, bindingContext)

        var options = valueAccessor();

        var pathObj = ko.computed(function() {

            var result = {
                path: options.id,
                params: {}
            };

            options.params.forEach(function(param) {
                result.params[param] = viewModel[param]();
            });

            return result;
        }).extend({ rateLimit: { timeout: 200, method: "notifyWhenChangesStop" } });

        pathObj.subscribe(function(newValue) {
            location.hash = pager.page.path(newValue);
        })

        return { controlsDescendantBindings: true }
    }
};

Problem

Original source