Tengo una columna vertebral del modelo de vista que estoy representación de aquí y de lo que es la posibilidad de 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, he viewmodel disponible y se puede quitar desde el dom, llamar a métodos en su modelo, etc. Pero lo que yo quiero es que arrastra este modelo de vista en un drop contenedor, como un bote de basura– y, a continuación, llama a un par de la vista del modelo de métodos y quitar de la DOM.

Lo que yo veo, sin embargo, es el método de devolución de llamada para cuando un ítem se coloca en un recipiente sería:

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

Así, soy capaz de ver la interfaz de usuario.se pueden arrastrar y eliminarlo desde el DOM, pero no tengo ninguna referencia a su modelo de vista. Estoy haciendo algo mal? Cualquier forma de evitar esto?

InformationsquelleAutor jdkealy | 2011-09-07

4 Comentarios

  1. 18

    He tenido este problema. Lo resolví así: Darle al destino una referencia al modelo de la colección. Establecer una propiedad data-cid="<%= cid %>" en la que se pueden arrastrar. Ahora usted puede buscar el modelo en la colección de la $(ui.draggable).data('cid'). Desde la columna vertebral afirma que CIDs son únicos, incluso se podría digitalizar una colección de colecciones, en caso de que hubiera varias clases del modelo que quería ser trashable.

    • Para que yo pueda obtener el elemento en la colección pero, ¿qué acerca de la obtención del modelo de vista a sí mismo.Ejecución de la colección.quitar(id) se elimina de la colección, pero no es mi opinión.
    • Bind ‘quitar’ evento en la colección de su punto de vista del método que quita la vista de la DOM.
    • Tendrá que realizar el seguimiento de la Vista, poniéndolos en una matriz o un objeto rastreado por el CID.
    • Gracias un montón. Esta totalmente trabajado y es que cambia el juego, en la manera de ver de javascript. 🙂
  2. 41

    Creo que me encontré con el mismo problema; en lugar de añadir meta-datos para el elemento o almacenarlo a nivel mundial, yo sólo almacena una referencia a la visión real de sí mismo en el elemento de DOM, que luego le da acceso a la modelo, y toda la información que necesita a partir de ahí.

    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;
                },
            });
        },
    });
    • esta es la mejor manera de hacerlo imo
    • Me gusta esta respuesta. Pero sería conseguir basura que se recoge adecuadamente en la mayoría de navegador (ya que no hay una referencia circular)?
    • No estoy 100% seguro, pero yo pensaba referencias circulares entre JS y objetos de nodos DOM fueron sólo un problema para las viejas de IE (7 y siguientes). Podría ser digno de mirar en aunque. También creo que jQuery datos podría mitigar ese problema también.
    • Gracias @ChristopherScott
    • No esta esencialmente salir de la Backbone.js marco?
  3. 11

    El enfoque que yo uso es para pasar el evento de la lanzables a la que pueden arrastrarse 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 vamos a ejecutar la caída de controlador en el contexto de la arrastró a la vista, que a menudo es más útil que la ejecución en el contexto de la lanzables vista.

    • +1 a la idea de tener que ejecutar en el contexto de la que se pueden arrastrar en lugar del drop.
    • esta es sin duda la mejor solución de todas en este hilo. También se puede pasar el DroppableView instancia como unido de drop:dropview, y dropviewDropHandler tendrán acceso tanto a DroppableView y DraggableView en las instancias.
  4. 1

    Hemos resuelto este problema con una propiedad global que se coloca en la app-espacio de nombres llamado arrastrando.

    Ya que hay sólo un punto de vista de ser arrastrado a la vez, arrastrando la vista se une al evento de arrastre y escribe su propio modelo en la ventana.arrastrando.

    Cuando se cae en un drop de vista, que a la vista se presenta la actual arrastrar modelo mediante el que arrastra variable.

    por cierto que la propiedad puede ser mejor colocado dentro de la global accesible solicitud de espacio de nombres en lugar de añadir directamente a la ventana. Esta fue la Aplicación.Vista.herramienta en nuestra aplicación.

    Como este:

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

Dejar respuesta

Please enter your comment!
Please enter your name here