Jquery Draggable和Backbone.js从droppable成功回调中获取对骨干模型的引用

Question

我有一个骨干视图模型,我在这里渲染,并使用jquery ui使其可拖动.

render: ->
$(this.el).attr('class', 'item').html(this.template(this.options.model.toJSON() ))
viewmodel = this
$(this.el).draggable
    revert: true
    drag: () ->
        console.log(viewmodel)

上面,我有viewmodel可用,可以从dom中删除它,在模型上调用方法等等.但我想要的是将这个视图模型拖入一个可放置的容器 - 就像一个垃圾桶 - 然后调用一些视图模型的方法并将其从DOM中删除.

我看到的是,当一个项目被放入容器时的回调方法是:

$(function() {
    $("#trash").droppable({
        drop: function(event, ui) {
          console.log(ui.draggable);
        }
    });
});

所以,我能够看到ui.draggable并从DOM中删除它,但我没有参考它的视图模型.难道我做错了什么？有办法解决这个问题吗？

Answer 1

我想我遇到了同样的问题; 我没有将元数据添加到元素或全局存储,而是在DOM元素上存储了对实际视图本身的引用,然后您可以访问该模型以及您需要的任何信息.

window.MyDraggableView = Backbone.View.extend({
    initialize: function(){
        $(this.el).draggable();
        $(this.el).data("backbone-view", this);
    }
});

window.MyDropTarget = Backbone.View.extend({
    initialize: function(){
        $(this.el).droppable({
            drop: function(ev, ui){
                // get reference to dropped view's model
                var model = $(ui.draggable).data("backbone-view").model;
            },
        });
    },
});

Answer 2

我有这个问题.我解决了这个问题:给drop目标一个模型集合的引用.data-cid="<%= cid %>"在draggable上设置一个属性.现在,您可以从中查找集合中的模型$(ui.draggable).data('cid').由于骨干断言CID是唯一的,因此您甚至可以扫描集合的集合,以防有多个模型类您想要进行转换.

Answer 3

我使用的方法是通过自定义事件将事件从droppable传递给draggable.

var DroppableView = Backbone.View.extend({
  events: { 'drop': 'dropHandler' },
  initialize: function() { this.$el.droppable(); },
  dropHandler: function(e, ui) { ui.draggable.trigger('drop:dropview'); }
})

var DraggableView = Backbone.View.extend({
  events: { 'drop:dropview': 'dropviewDropHandler'},
  initialize: function(){ this.$el.draggable(); },
  dropviewDropHandler: function() { this.doSomething(); }
});

这让你在拖动视图的上下文中执行drop handler,这通常比在droppable视图的上下文中执行它更有用.