【发布时间】：2017-06-22 09:47:43
【问题描述】：
我在敲除样式绑定中遇到了以下问题：我正在尝试构建带有节点的编辑器。还有一个小地图，应该跟随编辑器的节点并在编辑器上显示它们及其移动。小地图上节点及其“克隆”的位置应该是同步的。
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 }。
问题：
- 最初在小地图上渲染“克隆”时，它们的位置是正确的。但是当我在编辑器上移动一个节点时，它在小地图上的“克隆”不会改变它的位置，即使我在 Knockout 上下文（浏览器扩展）上看到了变化。我的意思是：“克隆”的上下文已更改，但其绑定样式属性（左侧和顶部）保持原样。
编辑：X 和 Y 似乎不可观察 - 这可能会回答问题？！
2. （已在 cmets 中解决）当 minimap panner 元素最初被渲染时，它的绑定属性 height 和 width 实际上并未绑定。我再次可以在 Konockout 上下文中看到它们的值已更新 - “维度”：对象 身高：977 宽度：1050 但没有应用于元素的此类样式。
【问题讨论】：
-
scrollWidth和scrollHeight是Position的属性吗？它们是可观察的吗？在地图中，您将Position创建为 observable，但不是其内容。 -
scrollWidth 和 scrollHeight 是 DOM 元素的属性。位置是可观察的，它的属性 X，Y 不是，但它们在 Knockout 上下文中更新，这是我所期望的。它们不会在标记中更新。
-
在此链接knockoutjs.com/documentation/computedObservables.html 中，它表示计算的可观察对象取决于一个或多个可观察对象。在你的
dimensions计算的 observable 中，scrollWidth和scrollHeight应该都是 observables。 -
你是对的！问题 2. 的绑定将变为
dimensions: ko.computed(function () { return { width:ko.observable(editorElement.scrollWidth), height: ko.observable(editorElement.scrollHeight) }; })并且 panner 元素的绑定将变为<div id="minimap_panner" data-bind="style: { height: dimensions().height() + 'px', width: dimensions().width() + 'px' }">
标签： javascript html knockout.js data-binding