简体   繁体   中英

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:

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

The Position property of each node holds an object { 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). 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?!

2. (Resolved in the comments) When the minimap panner element is initially rendered its bound properties height and width are not actually bound. 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.

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

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