嵌套的GSAP可拖動對象在剔除更新時不會更新

Question

因此，我正在使用GSAP TweenLite和Draggable以及KnockoutJS來創建嵌套的可調整大小的可觀察元素（內部有image的div ）。 我的目標是通過數字輸入以及拖動和調整大小來調整這些元素的大小和位置，就像Java / Android的布局生成器一樣。 我的代碼當前允許我監視由拖動和調整大小操作引起的更改，但是它對Knockout綁定或可觀察對象的更新沒有反應。

Javascript：

function object(id) {
            var self = this;
            self.id = ko.observable(id);
            self.parent = ko.observable();
            self.childNodes = ko.observableArray([]);
            self.x = ko.observable(100);
            self.y = ko.observable(50);
            self.w = ko.observable(100);
            self.h = ko.observable(100);
            }


            function EditorViewModel() {
            this.self = this;
            self.Objects = ko.observableArray([new object("1")]);
            self.Objects().push(new object("2"));
            self.Objects()[0].childNodes.push(new object("1.1"));
            self.Objects()[0].childNodes()[0].childNodes.push(new object("1.1.1"));
            self.chosenObject = ko.observable();


ko.bindingHandlers.dragResize = {
            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var val = ko.unwrap(valueAccessor());
            var drag = element;
            if (element.parentNode.parentNode == $(document.body)) {
            parent = element.parentNode;
            } else {
            var parent = element.parentNode.parentNode;
            }
            var handle = $("<div class='resize-handle'></div>").appendTo(drag);
            TweenLite.set(handle, {bottom: 0, right: 0});
            Draggable.create(drag,
            {
            type: 'top left', bounds: parent,
                    onDragStart: function ()
                    {
                    if (typeof Draggable.get(parent) !== 'undefined') {
                    untilRange(element, false); //sets all parent Dragagbles to disabled to prevent quirks when dragging child
                    }
                    },
                    onDragEnd: function ()
                    {
                    if (typeof Draggable.get(parent) !== 'undefined') {
                    untilRange(element, true); //same as above, but re-enables them after drag
                    }
                    },
                    onDrag:function (e){
                    val.x(this.x);
                    val.y(this.y);
                    }
            });
            Draggable.create(handle, {
            type: "top,left",
                    onPress: function (e) {
                    e.stopPropagation(); // cancel drag
                    },
                    onDrag: function (e) {
                    val.w(this.x);
                    val.h(this.y);
                    TweenLite.set(drag,{width:val.w(),height:val.h()});
                    },
            });
            },
                    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                    var val = ko.unwrap(valueAccessor());
                    var drag = Draggable.get(element);
                    element.x=val.x();
                    drag.update();
                    }
            }

HTML：

<div id="range" data-bind="template:{name: 'elementTemplate',foreach:Objects()}">

        </div>


        <!--Templates-->
        <script type="text/html" id="elementTemplate">
            <!--<pre style="position:relative;width: 100px" data-bind="text: ko.toJSON($data, null, 2)"></pre>-->
            <div class="draggable" data-bind="attr:{id:id}, dragResize:{x:x,y:y,h:h,w:w}">

                <div data-bind="template:{name: 'elementTemplate',foreach:childNodes()}">
                </div>
                <img src="res/Download.jpg" class="mapClass" alt="If you see this we haven't done well"/>
            </div>
        </script>

如果有人對實現我的目標有其他建議，請告訴我，我想保留的唯一部分是KnockoutJS，因為我的老師推薦了。

Answer 1

您的代碼看起來還不錯。 我無法未經修改地運行它-例如，我錯過了untilRange函數。 因此，我將其簡化為基本要點，以測試如何進行可觀察的位置更新，反之亦然。 您將不得不重新應用到原始代碼。

您可能會遇到的問題是，您多次嘗試在淘汰賽中進行新的綁定時會在兩個方向上更新可觀察對象：-拖動可修改可觀察對象的對象-可以修改可觀察對象的對象賓語

在某些情況下，您需要注意，修改可觀察對象的事件不會觸發綁定的更新。 但這是推測，因為我無法運行未修改的代碼。

即使從代碼中編寫一個較小的示例，即使不考慮周期，兩種方式的更新似乎也可以正常工作。 我發現，在綁定的update（）函數內部，我根本不會調用Draggable.update（）。 除此之外，兩種方式的綁定都應該起作用。

看到這個小提琴： https : //jsfiddle.net/domoran/1dk1hc4v/5/

Javascript：

function object(id) {
  var self = this;
  self.id = ko.observable(id);
  self.x = ko.observable(0);
  self.y = ko.observable(0);
}

ko.bindingHandlers.dragResize = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var val = ko.unwrap(valueAccessor());
    var lastSelected = val.last;

    Draggable.create(element, {
      type: "x,y",
      onDrag: function(e) {
        lastSelected(ko.dataFor(element));
        val.x(this.x);
        val.y(this.y);
      }
    });
  },

  update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var updateCoords = function() {
        // since this is invoked inside a computed, it will be invoked, 
        // whenever the observables x and y change
                TweenLite.set(element,{x:val.x(),y:val.y()});
    };

    var val = ko.unwrap(valueAccessor());
    // make the updateCoors function call whenever one of its observables
    // changes
    updateCoords();
  }
};

function EditorViewModel() {
  var self = this;

  self.Objects = ko.observableArray([new object("1"), new object("2")]);
  self.lastSelected = ko.observable();
}

ko.applyBindings(new EditorViewModel());

HTML：

<body>
  <div id="range" data-bind="template:{name: 'elementTemplate',foreach:Objects }">
  </div>

  <!--Templates-->
  <script type="text/html" id="elementTemplate">
    <div data-bind="attr:{id:id}, dragResize:{x:x,y:y,last:$root.lastSelected}">
      <img width=80 src="https://upload.wikimedia.org/wikipedia/commons/4/4c/World_borders_lamb_azi.png" class="mapClass" alt="If you see this we haven't done well" /><span data-bind="text: x() + '/' + y()"></span>
    </div>
  </script>

  <div data-bind="with:lastSelected">
    <label>x</label><input type="text" data-bind="value: x" />
    <label>y</label><input type="text" data-bind="value: y" />
  </div>
</body>