如何从DOM节点转到viewModel对象？

Question

当drop回调函数时,this设置为droppable DOM节点(目标),ui.draggable是拖动的DOM节点.

是否有一种惯用的方法来获取已呈现为特定DOM节点的模型对象？

(我正在使用jQuery模板,如果它很重要.可能有多个渲染的单个modelView对象.)

Answer 1

可能有更好的方法来做到这一点,但我作弊.这是我的绑定.

编辑

由于下面的例子不完整,我做了一个简单的完整例子,可以在这里找到.

http://pastie.org/1446229

存储当前拖动元素的位置取决于您.在示例中,我使用全局变量作为viewModel项的代理.您可以为每个draggables和droppables提供对其父模型的引用,并以这种方式访问​​该属性,这取决于您.

希望这可以帮助.

ko.bindingHandlers.drag = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var $element = $(element),
                        dragOptions = { 
                            revert: 'invalid',
                            revertDuration: 250,
                            cancel: 'span.handle',
                            cursorAt: { left: 28, bottom: 0 },
                            appendTo : 'body',
                            helper: function () { 
                                return $('<div class="drag-icon"><img src="images/folder-large.png" alt="move" width="32" height="32" /></div>'); 
                            },
                            cursor: "pointer",
                            addClasses: false,
                            distance: 10,
                            start : function (e, ui) { 
                                viewModel.isDragging();
                            }
                        };

                    $element.draggable(dragOptions);
                },
                update : function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var $element = $(element),
                        active = valueAccessor();

                    if (!active) {
                        $element.draggable('disable');
                    }
                    else {
                        $element.draggable('enable');
                    }
                }
            };

ko.bindingHandlers.drop = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
                    var $element = $(element),
                        value = valueAccessor() || {},
                        handler = ko.utils.unwrapObservable(value.onDropComplete),
                        dropOptions = { 
                            greedy: true,
                            tolerance: 'pointer',
                            addClasses: false,
                            drop: function (e, ui) {
                                setTimeout(function () { 
                                                handler(viewModel.dragging()); 
                                            }, 0);
                            }
                        };
                    $element.droppable(dropOptions);
                }
            };

所以我设置了draggable并在start函数中存储了当前拖动的节点,viewModel.isDragging();然后我可以在drop handler中再次访问它.

干杯,

伊恩