简体   繁体   English

淘汰赛样式绑定不会更新“左”和“上”

[英]Knockout style binding does not update Left and Top

I got the following issue with the knockout style binding: I'm trying to build editor with nodes inside. 敲除样式绑定出现以下问题:我正在尝试构建内部带有节点的编辑器。 Also a minimap that should follow the nodes of the editor and display them and their movement on the editor. 还有一个微型地图,应该跟随编辑器的节点,并在编辑器上显示它们及其移动。 The positions of the nodes and their "clones" on the minimap should be synchronized. 微型地图上的节点及其“克隆”的位置应同步。

Html: 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: 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);

The Position property of each node holds an object { X, Y }. 每个节点的Position属性都包含一个对象{X,Y}。

The issues: 问题:

  1. When the "clones" are initially rendered on the minimap, their positions are correct. 当“克隆”最初呈现在小地图上时,它们的位置正确。 But when I moved a node on the editor, its "clone" on the minimap, does not change its position, even if I see the change on the Knockout context (browser extension). 但是,当我在编辑器上移动节点时,即使在Knockout上下文(浏览器扩展)上看到了更改,其在迷你地图上的“克隆”也不会更改其位置。 I mean: the context of the "clone" is changed, but its bound style properties (left and top) remain as they are initially. 我的意思是:“克隆”的上下文已更改,但其绑定样式属性(左和上)仍保持最初状态。

Edit: It seems that X and Y are not observable - this may answer the question?! 编辑:似乎X和Y不可观察-这可以回答问题吗?

2. (Resolved in the comments) When the minimap panner element is initially rendered its bound properties height and width are not actually bound. 2.(在注释中解决)最初渲染minimap panner元素时,其绑定属性heightwidth实际上并未绑定。 Again I can see their values in the Konockout context updated - "dimensions":Object height:977 width:1050 but there is no such styles applied to the element. 再次,我可以在Konockout上下文中看到它们的值更新-“ dimensions”:Object height:977 width:1050,但是没有将此类样式应用于元素。

似乎X和Y不可观察,只是常规性质?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM