Question

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

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

并将其绑定到

myapp.controller("ActivityController", function ($scope,$location) {
  var myParam=$location.search().YOUR_SEARCH PARAM
  //use myParam however you want.

但问题是，一旦拖动了这个div元素，因为我已经将它拖动了，它就不会改变我的ElementVM对象的值。

你对绑定的工作原理有什么想法吗？

谢谢。

Answer 1

要执行此操作，您需要使用自定义绑定。您可以在下方或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>

Answer 2

Knockout“style”绑定是一种“单向”绑定：它查找模型中的更改并将其应用于视图（在这种情况下为HTML元素）。

如果要从HTML元素设置模型值，您应该通过代码执行此操作，该代码可以在window.resize事件上订阅，也可以通过计时器获取HTML大小。

您可以通过自定义绑定或组件实现此类功能。

绑定将DIV元素属性拖动到knockoutjs中的对象属性

2 个答案: