2012-05-14 12 views
7

Estoy empezando a aprender Backbone.js y comencé con this boilerplate e hice un ejemplo cargando datos JSON de un archivo estático en el disco y lo mostraba en una tabla html .El método de destrucción del modelo Backbone.js no desencadena el evento de error

Luego traté de vincular un evento en un botón que se supone que elimina un elemento de la colección, y luego del DOM. La cosa funciona bien, el clic desencadena el método destroy, el evento remove se desencadena en la colección, pero no sale nada de los successerror o devoluciones de llamada de destroy

Alguien tiene una pista?

El modelo:

define([ 
    'underscore', 
    'backbone' 
], function(_, Backbone) { 
    var memberModel = Backbone.Model.extend({ 
    url: "/members.json", 
    defaults: { 
     email: "", 
     firstname: "", 
     lastname: "", 
     gender: "", 
     language: "", 
     consent: false, 
     guid: "", 
     creationDate: "" 
    }, 
    initialize: function(){ 
    } 

    }); 

    return memberModel; 

}); 

La vista:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'mustache', 
    'collections/members', 
    'text!templates/members/page.html' 
], function($, _, Backbone, Mustache, membersCollection, membersPageTemplate){ 
    var membersPage = Backbone.View.extend({ 
    el: '.page', 
    initialize: function(){ 
     this.members = new membersCollection(); 

     this.members.on('remove', function(){ 
       // works fine 
      $('.members-body tr').first().remove(); 
      console.log('removed from collection'); 
     }); 
    }, 

    render: function() { 
     var that = this; 

     this.members.fetch({success: function(){ 

      var wrappedMembers = {"members" : that.members.toJSON()}; 

      that.$el.html(Mustache.render(membersPageTemplate, wrappedMembers)); 

      $('#delete-member').click(function(){ 
       that.members.at(0).destroy({ 
         // prints nothing!!! 
        success: function(){ console.log('sucess'); }, 
        error: function(){ console.log('error'); } 
       }); 

      }); 

     }}); 

    } 
    }); 
    return membersPage; 
}); 
+0

¿Tiene un conjunto de 'url' para sus modelos o colección? –

+0

Sí, 'url' está establecido en el modelo y la colección – MaxiWheat

Respuesta

7

estoy de acuerdo que esto es extraño. No estoy del todo seguro de lo que está pasando todavía, pero esto es lo que sospecho ...

Sus llamadas Destroy() no están devolviendo JSON válido.

  • Viendo firebug, fiddler, o lo que sea, ¿cómo se parecen las respuestas de destroy()?
  • También me interesa saber qué that es cuando se activa su función de eliminar y hacer clic.
  • Does destroy return false o un objeto jqXHR?

Hay un poco de desconexión en la red troncal (al menos yo era para mí al principio). Cuando llame al destroy() o busque/guarde para ese asunto, la llamada es asíncrona. Inmediatamente después de la llamada, el evento de eliminación se activa y su colección puede responder. Pero, cavar un poco más profundo en la documentación, otro evento es disparado confirmación de la eliminación:

y un evento de "sincronización", después el servidor ha reconocido con éxito la eliminación del modelo

Por lo tanto, su colección actúa bajo la presunción de que la eliminación ha tenido éxito. Si desea que su colección responda a una eliminación confirmada, busque el evento sync.

Esto deja un punto persistente: ¿por qué no está disparando el manejador de errores? Bueno, las devoluciones de llamadas están diseñadas para responder a la confirmación de una eliminación. Pero apuesto a que la pila de llamadas JS no sabe cómo interpretar la respuesta que está recibiendo, como un éxito o error. Probablemente tropezaste con las realidades de AJAX. He encontrado en la red troncal, jquery y un montón de otros marcos que puede confundir el manejo de errores ajax. Google "jquery ajax error not called" y encontrarás una gran cantidad de escenarios diferentes donde el evento de error no se desencadena.


ACTUALIZACIÓN

Después de los comentarios de ida y vuelta ... dos cosas están sucediendo.En primer lugar, su modelo se percibe como "nuevo", lo que significa que las llamadas al Destroy() no hacen solicitudes al servidor. Como resultado, su éxito/error no se dispara. Ver this commit.

Dicho esto, no creo que considere su modelo nuevo (no persistió en el servidor). Tienes que hacer una de dos cosas. Incluya una propiedad denominada idO en su modelo de modelo que asume su ID de modelo (guid) a la ID del modelo. El mapeo es fácil al aplicar la siguiente línea a su modelo: idAttribute: "guid". Puede ver más en el idAttribute here.

+0

Estoy probando en Google Chrome, y cuando miro la pestaña Red, no hace nada cuando llamo' destroy'. También probé con Fiddler para verificar si se envía una solicitud DELETE http, pero allí tampoco pasa nada. – MaxiWheat

+0

Agregue la definición de su modelo a la publicación original (incluida la respuesta JSON de fetch). Además, justo antes de eliminar, ¿cuál es el valor de 'that.members.at (0) .IsNew'? – EBarr

+0

Además, esta línea 'this.members = new membersCollection;' es impar. Yo esperaría una asignación directa, o si estás usando 'nuevo' paréntesis después de 'membersCollection()' – EBarr

Cuestiones relacionadas