CODEWITHSUNDEEP
javascripthtmlknockout.jsdata-binding
P.Petkov
P.Petkov

Reputation: 1579

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.

Upvotes: 0

Views: 293

Answers (1)

P.Petkov
P.Petkov

Reputation: 1579

It seems that X and Y are not observable, just regular properties?!

Upvotes: 1

Related Questions