2011-02-05 8 views
22

Tengo una lista de tareas pendientes, y todo está renderizado como se esperaba, pero cuando hago clic en el botón de enviar en el formulario de edición, el formulario se envía (GET/todo_articulos) y la página se vuelve a cargar y solo muestra el formulario de edición . El evento "enviar formulario" no está limitado y no puedo entender por qué. ¿Qué me estoy perdiendo?Backbone.js: ¿Por qué no está vinculado este evento?

App.Views.Edit = Backbone.View.extend({ 
    events: { 
    "submit form": "save" 
    }, 
    initialize: function(){ 
    this.render(); 
    }, 
    save: function(){ 
    var self = this; 
    var msg = this.model.isNew() ? 'Successfully created!' : 'Saved!'; 

    this.model.save({ 
     title: this.$('[name=title]').val(), 

     success: function(model, resp){ 
     console.log('good'); 
     new App.Views.Notice({message: msg}); 
     self.model = model; 
     self.render(); 
     self.delegateEvents(); 
     Backbone.history.saveLocation('todo_items/'+ model.id); 
     $('#edit_area').html(''); 
     }, 
     error: function(){ 
     console.log('bad'); 
     new App.Views.Error(); 
     } 
    }); 

    return false; 
    }, 
    render: function(){ 
    $('#edit_area').html(ich.edit_form(this.model.toJSON())); 
    } 
}); 

Aquí está el formulario de edición:

<script id="edit_form" type="text/html"> 
    <form> 
    <label for="title">Title:</label> 
    <input name="title" type="text" value="{{title}}" /> 
    <button>Save</button> 
    </form> 
</script> 

Respuesta

25

Backbone usa delegateEvents en el elemento el. Si no especifica "el" o no usa "el" para representar su vista, la delegación del evento no funcionará. En vez de hacer

$("#edit_area") 

dentro de su render, pasarlo como la opción "el" en el constructor:

edit = new App.Views.Edit({el: $("#edit_area")}) 

refieren a ella como this.el todas partes en su código de la vista, especialmente en el render .

+0

Gracias por esta respuesta, por lo tanto '$ ('# edit_area'). Html ("blah"); 'no funcionará. ¿Cómo puedo configurar el html de un elemento sin tener que renderizar toda la vista? –

0

Después de muchas horas de monerías con esto, trabajaron después de configurar explícitamente el en la vista, y se utiliza en la función $(this.el)render. Extraño.

+0

¿Podría aclarar/publicar su respuesta? ¡Gracias! – Matt

+0

Consulte mi respuesta en su otra publicación - http://stackoverflow.com/questions/5624929/backbone-view-el-confusion/5757160#5757160 – LeRoy

Cuestiones relacionadas