javascript - 将DIV元素属性的绑定(bind)拖动到knockoutjs中的对象属性

Question

我这里有一个代表 div 元素的对象

function ElementVM
{
    var self = this;

    self.Height = ko.observable();
    self.Width = ko.observable();
    self.Bottom = ko.observable();
}

并将其绑定(bind)到

<div data-bind="style:{ height: Height, width: Width, bottom: Bottom, position: 'absolute' }">

但问题是，一旦这个 div 元素被拖动，因为我已将其设置为可拖动，它不会更改我的 ElementVM 对象的值。

您是否知道绑定(bind)应如何为此工作？

谢谢。

Answer 1

为此，您需要使用自定义绑定(bind)。您可以在下面或 this jsfiddle 中看到它.

// http://knockoutjs.com/documentation/custom-bindings.html
ko.bindingHandlers.draggable = {
     init : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called when the binding is first applied to an element
        // Set up any initial state, event handlers, etc. here
        var $element = $(element);
        var position = ko.unwrap(valueAccessor());
        if (position) {
            if (position.left) 
                $element.css({left:ko.unwrap(position.left)});
            if (position.top) 
                $element.css({top:ko.unwrap(position.top)});
            if (position.height) 
                $element.height(ko.unwrap(position.height));
            if (position.width) 
                $element.width(ko.unwrap(position.width));
        }
        var draggable = $element.draggable({
            stop: function(event,ui) {
                if (position) {
                    if (ko.isWritableObservable(position.left))
                       position.left(ui.position.left);
                    if (ko.isWritableObservable(position.top))
                       position.top(ui.position.top);
                    if (ko.isWritableObservable(position.height))
                       position.height($element.height());
                    if (ko.isWritableObservable(position.width))
                       position.width($element.width());
                }
            }
        });
    },
    update : function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        // This will be called once when the binding is first applied to an element,
        // and again whenever any observables/computeds that are accessed change
        // Update the DOM element based on the supplied values here.
        var position = ko.unwrap(valueAccessor());
        var $element = $(element);
        if (position.left)
			$element.css({left:ko.unwrap(position.left)+'px'});
        if (position.top)
			$element.css({top:ko.unwrap(position.top)+'px'});
        if (position.height)
            $element.height(ko.unwrap(position.height));
        if (position.width)
            $element.width(ko.unwrap(position.width));
    }
};

var vm = {
    position: ko.observable({
    	left: ko.observable(150),
    	top: ko.observable(125),
    	width: ko.observable(100),
    	height: ko.observable(40)
    })
};

ko.applyBindings(vm);

div {
    border: solid 1px #444;
    background-color: #DDD;
    text-align: center;
    padding: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<div data-bind="draggable: position"
     style="position:absolute;">
    This is a draggable div
</div>
<ul>
    <li>Top: <input type="textbox" data-bind="value: position().top"/></li>
    <li>Left: <input type="textbox" data-bind="value: position().left"/></li>
    <li>Width: <input type="textbox" data-bind="value: position().width"/></li>
    <li>Height: <input type="textbox" data-bind="value: position().height"/></li>
</ul>
<pre data-bind="text:JSON.stringify(ko.toJS($root),null,2)"></pre>