javascript - 当 JQuery 元素更新时，Knockout JS 自定义绑定(bind)不会更新

Question

我有一个包含对象列表的页面，单击其中一个会打开一个弹出菜单。

我想将弹出菜单与单击的对象对齐。因此，我创建了一个等待对象 JQuery 元素的自定义绑定(bind)，然后根据对象的偏移量和滚动顶部对齐弹出窗口。

一切正常，但我有一个小问题。在该对象列表之前，我有一个容器，显示一些额外的详细信息，并在特定时间后淡出。

因此，如果我尝试在容器淡出之前打开弹出菜单，即使在容器淡出之后，当对象列表移动时，它也会保留在该位置。

所以我想我只需将“更新”添加到自定义绑定(bind)中，但它不起作用。

在我的自定义绑定(bind)中:

ko.bindingHandlers.alignPopup = {
        init: function (element, valueAccessor) {
            var value = valueAccessor();
            var element = value(); // jQuery.fn.init[1] , this is the object clicked
            ... some aligning computations ...
            }
        },
        update: function(element, valueAccessor) {
            ... same thing ...
        }
    };

在我的 ViewModel 中，我尝试过:

var elementObs = ko.observable(objectElement) // objectElement is the object clicked jQuery element

在 html 中，我刚刚添加了与上述 elementObs 的自定义绑定(bind)

Update 永远不会被调用，所以我的猜测是 observable 不知道 'offset()' 和 'scrollTop' 已经修改，因为它们也不是 observables。

我怎样才能让 jQuery observable 注意到这两个属性已经改变了？

编辑:我说过“更新”永远不会被调用，它仅在应用绑定(bind)时才被调用(因为它总是应该)

Answer 1

不幸的是，答案是“你不能”。至少，不是用 Knockout 或 jQuery，以您似乎追求的方式。

“scrollTop”和“offset”属性是不可观察的，并且您不能以任何直接方式使它们可观察。

您能做的最好的事情就是使用观察者模式和 DOM 事件。例如，每当窗口上发生滚动事件时，就缓存元素的scrollTop的当前值。像 RxJs 这样的库让这变得非常容易。

我不确定是否存在类似的偏移解决方案。

在这种情况下，我可能会从淡入淡出回调内部触发自定义事件，并通过重新定位菜单来响应该事件(可能还有其他一些事件)。