javascript - knockout 样式绑定(bind)不会更新左侧和顶部

Question

我遇到了 knockout 样式绑定(bind)的以下问题:我正在尝试构建内部带有节点的编辑器。还有一个小 map ，应该跟随编辑器的节点并在编辑器上显示它们及其移动。小 map 上节点及其“克隆”的位置应该同步。

HTML:

<div id="minimap">
            <div id="minimap_panner" data-bind="style: { height: dimensions.height + 'px', width: dimensions.width + 'px' }">
                <!-- ko foreach: { data: nodePositions() } -->
                <div class="minimap-node-item" data-bind="style: { left: X + 'px', top: Y + 'px' }"></div>
                <!-- /ko -->
            </div>
        </div>

JS:

ko.applyBindings({
            nodePositions: ko.computed(function () {
                var nodes = model.displayedNodes()();

                return nodes.map(function (node) {
                    return ko.observable(node.Position);
                });
            }),
            dimensions: ko.computed(function () {                     
                return { width: editorElement.scrollWidth, height: editorElement.scrollHeight };
            })
        }, minimapPanner);

每个节点的 Position 属性保存一个对象 { X, Y }。

问题:

1. 当“克隆”最初在小 map 上渲染时，它们的位置是正确的。但是，当我在编辑器上移动节点时，即使我在 Knockout 上下文(浏览器扩展)上看到更改，它在小 map 上的“克隆”也不会更改其位置。我的意思是:“克隆”的上下文发生了更改，但其绑定(bind)的样式属性(左侧和顶部)保持不变。

编辑:似乎 X 和 Y 不可观察 - 这可以回答问题？!

2。 (已在评论中解决)当小 map 平移器元素最初渲染时，其绑定(bind)属性高度和宽度实际上并未绑定(bind)。我再次可以在 Konockout 上下文中看到它们的值已更新 - “尺寸”:对象 高度:977 宽度:1050但没有此类样式应用于该元素。

Answer 1

看起来X和Y是不可观察的，只是常规属性？!