Knockoutjs: ScrollIntoViewTrigger

Question

i recently struggled with a problem and although i solved it for me, i'm not sure whether there aren't better solutions out there, so I'd appreciate any comments.

Problem. i wanted to create a 'ScrollIntoView' binding. Since scrolling an element into view, requires the DOM-Element, i wrote a custom binding, which i then wanted to explicitly trigger, whenever i pleased. I started with this code:

ko.bindingHandlers.scrollTo = {
    update: function (element, valueAccessor, allBindings) {
        var _value = valueAccessor();
        var _valueUnwrapped = ko.unwrap(_value);
        if (_valueUnwrapped) {
            element.scrollIntoView();
        }
    }

};

The binding:

<div data-bind="scrollTo: goToThis">

And in the ViewModel i had this observable:

_self.goToThis = ko.observable(false).extend({notify: 'always'});

which I then could just trigger by calling:

_self.goTohis(true);

So far, so good. However i quickly ran into Problems. Since whenever i set the goTothis() Observable to true, the true value stuck with it, which caused some of the elements to scroll into view, without the user explicity triggering it. For instance, when i changed the view, essentially hiding all the elements with an if binding, and then switched back, the if binding would re-trigger all the goToThis observables, which had previously been set to true. Ugh!

So i thought up this pattern and extended my custum binding like this:

    ko.bindingHandlers.scrollTo = {
        update: function (element, valueAccessor, allBindings) {
            var _value = valueAccessor();
            var _valueUnwrapped = ko.unwrap(_value);
            if (_valueUnwrapped) {
                element.scrollIntoView();
// resets the trigger value to false. Otherwise there will be more and more ViewModels, where the value is true.
                if (ko.isWriteableObservable(_value) && typeof (_valueUnwrapped) === 'boolean') {
                    _value(false);
                }
            }
        }
   };

Essentially resetting the boolean value each time it is triggered.

So i guess my question is this: Has anybody ever written a scrollIntoView binding? If yes, how did you solve it?

And generally, is there a pattern for writing triggers? ie i just want to trigger a binding, but there is no real value change.

best regards j

Answer 1

Your scrollTo handler is fine like this:

ko.bindingHandlers.scrollTo = {
    update: function (element, valueAccessor, allBindings) {
        var _value = valueAccessor();
        var _valueUnwrapped = ko.unwrap(_value);
        if (_valueUnwrapped) {
            element.scrollIntoView();
        }
    }
};

But instead of working with a goToThis observable per view model, better would be to have 1 observable in your root which keeps track of the current scroll item and then pass an expression in your binding like this:

<div data-bind="scrollTo: $root.scrolledItem() == $data">

This way you don't need to reset anything and you don't need an goToThis observable per view model.

See http://jsfiddle.net/290ew0nr/1/