Question

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

我想将弹出菜单与单击的对象对齐。所以我创建了一个自定义绑定，它等待对象JQuery元素，然后根据对象的offset和scrollTop对齐弹出窗口。

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

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

所以我想我只是将'update'添加到自定义绑定中，但它不起作用。

在我的自定义绑定中：

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

添加了自定义绑定

永远不会调用更新，所以我的猜测是observable不知道'offset（）'和'scrollTop'已被修改，因为它们也不是可观察的。

如何让jQuery可观察到这两个属性发生了变化？

编辑：我说过'update'永远不会被调用，只有在应用绑定时才开始调用它（因为它总是应该）

Answer 1

不幸的是，答案是“你做不到”。至少，不是使用Knockout或jQuery，而是你似乎要追求的方式。

'scrollTop'和'offset'属性是不可观察的，你无法以任何直接方式观察它们。

您可以做的最好的事情是使用观察者模式和DOM事件。例如，只要窗口上发生滚动事件，就为您的元素缓存scrollTop的当前值。像RxJs这样的库让这很容易。

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

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

当JQuery元素更新时，Knockout JS自定义绑定不会更新

1 个答案: