jquery ui - example - Jquery Draggable y Backbone.js obtienen referencia del modelo de red troncal desde el interior de la devolución de llamada exitosa que se puede eliminar

eventos draggable jquery

Question

Tengo un modelo de vista de red troncal que estoy renderizando aquí y lo puedo arrastrar con 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)

Arriba, tengo viewmodel disponible y puedo eliminarlo del dom, llamar a métodos en su modelo, etc. Pero lo que quiero es arrastrar este modelo de vista a un contenedor desplegable, como un bote de basura, y luego llamar a algunos de los métodos del modelo de vista y eliminarlo del DOM.

Lo que veo, sin embargo, es que el método de devolución de llamada para cuando un elemento se deja caer en un contenedor sería:

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

Entonces, puedo ver ui.draggable y eliminarlo del DOM, pero no tengo referencia a su modelo de vista. ¿Estoy haciendo algo mal? ¿Alguna forma de evitar esto?

Answer 1

Creo que encontré el mismo problema; en lugar de agregar metadatos al elemento o almacenarlo globalmente, acabo de almacenar una referencia a la vista real en el elemento DOM, que luego le da acceso al modelo y cualquier información que necesite desde allí.

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

El enfoque que uso es pasar el evento desde el desplegable al arrastrable a través de un evento personalizado.

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(); }
});

Esto permite ejecutar el manejador de soltar en el contexto de la vista arrastrada, que a menudo es más útil que ejecutarlo en el contexto de la vista desplegable.

Answer 3

He tenido este problema Lo resolví de la siguiente manera: Dale al objetivo de soltar una referencia a la colección de modelos. Establezca una propiedad data-cid="<%= cid %>" en el archivo arrastrable. Ahora puede buscar el modelo en la colección del $(ui.draggable).data(''cid'') . Dado que la red troncal afirma que los CID son únicos, incluso podría escanear una colección de colecciones, en caso de que haya múltiples clases de modelos que desee que sean transitables.

Answer 4

Solucionamos este problema con una propiedad global que se coloca en el espacio de nombres de la aplicación, llamada arrastre.

Como solo se arrastra una vista a la vez, la vista de arrastre se vincula al evento de arrastre y escribe su propio modelo en window.dragging.

Cuando se deja caer en una vista que se puede eliminar, esa vista obtiene el modelo de arrastre actual a través de esa variable de arrastre.

Por cierto, esa propiedad se puede ubicar mejor dentro del espacio de nombre de la aplicación accesible global en lugar de agregarla directamente a la ventana. Esto fue App.View.tool en nuestra aplicación.

Me gusta esto:

dragging = null;

draggableview = new Backbone.View.extend({

    //...
    initialize: function() {

        //...
        $(this.el).bind("dragStart",
        function() {
            window.dragging = this.model;
        },
        this);

        //remove reference for garbage collection purpose
        $(this.el).bind("dragStop",
        function() {
            delete window.dragging;
        },
        this);
    },

});

droppableview = new Backbone.View.extend({

    //...
    initialize: function() {

        //...
        $(this.el).bind("drop",
        function() {
            var draggedmodel = window.dragging;
            delete window.dragging;
            // for garbage collection purpose
            //do funky stuff
            alert("You dropped " + draggedmodel.get(''title'') + " on " + this.el.get(''title''));
            //...
        },
        this);
    },
});