Knockoutjs：ScrollIntoViewTrigger

我最近遇到了一个问题，虽然我为我解决了它，但我不确定是否没有更好的解决方案，所以我很感激任何评论。

问题。我想创建一个“ScrollIntoView”绑定。由于将元素滚动到视图中需要 DOM 元素，因此我编写了一个自定义绑定，然后我想在我愿意的时候显式触发它。我从这段代码开始：

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

};

绑定：

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

在 ViewModel 中我有这个可观察到的：

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

然后我可以通过调用来触发：

_self.goTohis(true);

到目前为止，一切都很好。然而我很快就遇到了问题。因为每当我将 goTothis() Observable 设置为 true 时，真实值就会保留下来，这会导致某些元素滚动到视图中，而无需用户显式触发它。例如，当我更改视图时，本质上使用 if 绑定隐藏所有元素，然后切换回来，if 绑定将重新触发所有先前设置为 true 的 goToThis observables。啊!

所以我想出了这个模式并像这样扩展我的自定义绑定：

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

本质上是在每次触发时重置布尔值。

所以我想我的问题是这样的：有人写过scrollIntoView 绑定吗？如果是，你是如何解决的？

一般来说，编写触发器有一个模式吗？即我只是想触发一个绑定，但没有真正的值变化。

此致 j

Your scrollTo处理程序就像这样：

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

但不是与goToThis每个视图模型都有一个可观察的对象，最好是在根目录中有 1 个可观察对象，用于跟踪当前滚动项，然后在绑定中传递一个表达式，如下所示：

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

这样你就不需要重置任何东西，也不需要goToThis按视图模型可观察。

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