knockout.js - knockout : ScrollIntoViewTrigger

Question

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

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

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

};

绑定(bind):

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

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

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

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

_self.goTohis(true);

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

所以我想出了这个模式并扩展了我的自定义绑定(bind)，如下所示:

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

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

所以我想我的问题是这样的:有人写过scrollIntoView 绑定(bind)吗？如果是的话，你是怎么解决的？

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

最诚挚的问候j

Answer 1

您的 scrollTo 处理程序就像这样:

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

但是，最好不要在每个 View 模型中使用 goToThis 可观察对象，最好在根目录中使用 1 个可观察对象来跟踪当前滚动项，然后在绑定(bind)中传递一个表达式，如下所示:

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

这样您就不需要重置任何内容，也不需要每个 View 模型都有一个 goToThis 可观察对象。

参见http://jsfiddle.net/290ew0nr/1/