Backbone js Model Ahorra más de una vez

Estoy aprendiendo Backbone js y por eso he comenzado a crear una aplicación de ejemplo.

Por cierto, ahora estoy enfrentando un problema, es decir, el modelo está guardando más de una vez en mi base de datos. Me refiero a que cuando haga clic en ‘ Crear usuario ‘, verá un formulario, de modo que cuando haga clic en el botón ‘Crear usuario’, los detalles se guardarán más de una vez en mi base de datos y, por lo tanto, toda la información de los usuarios se mostrará en la página de inicio.

En realidad estoy tratando de practicar este video: https://www.youtube.com/watch?v=FZSjvWtUxYk

La salida se vería así: http://backbonetutorials.com/videos/beginner/#/new

Aquí está mi código:

     /*$.getJSON('api/users/1',function(data){ console.log(data); });*/    

User Manager


New User
First Name Last Name Age
Create User First Name
Last Name
Age
var UsersList = Backbone.Collection.extend({ url: 'api/users' }); var User = Backbone.Model.extend({ urlRoot: 'api/users' }); var UsersListView = Backbone.View.extend({ el: '.page', render: function(){ var that = this; var users = new UsersList(); users.fetch({ success: function(usersList){ var template = _.template($('#user-list-template').html())({users: usersList.models}); that.$el.html(template); } }); } }); var AddUserView = Backbone.View.extend({ el: '.page', render: function(){ var template = _.template($('#add-user-template').html())({user:null}); this.$el.html(template); }, events: { 'submit .add-user-form': 'saveOrUpdateUser' }, saveOrUpdateUser: function(e){ e.preventDefault(); var userDetails = {firstName: $('#firstName').val(), lastName: $('#lastName').val(), age: $('#age').val()}; var user = new User(); user.save(userDetails,{ //SEEMS LIKE HERE HAVING SOME PROBLEM success: function(){ console.log('INSIDE SUCCESS..'); router.navigate('',{trigger: 'true'}); } }); } }); var Router = Backbone.Router.extend({ routes:{ '':'home', 'new':'addUser' } }); var router = new Router(); router.on('route:home',function(){ var usersListView = new UsersListView(); usersListView.render(); }); router.on('route:addUser',function(){ var addUserView = new AddUserView(); addUserView.render(); }); Backbone.history.start();

Por favor, sugiéreme qué salió mal y cómo solucionarlo.

@MarciaYudkin notará que cuando carga su sitio por primera vez y crea un usuario, ese primer usuario no guarda un duplicado. Sin embargo, la próxima vez que llene un formulario CreateUser , el usuario se guardará dos veces. ¡Lo que está sucediendo aquí es que estás sufriendo por Zombie Views ! (Ahh!)

Una vista de Zombie es una vista que pensaste que se fue, pero de hecho permanece en el fondo. Como todavía están vivos, también están vinculados a los events vista. La vista de zombie que detectaste en tu código es:

 router.on('route:addUser',function(){ var addUserView = new AddUserView(); // <---Right here! addUserView.render(); }); 

Cada vez que un usuario sigue la route:addUser route termina creando un nuevo AddUserView . Esta vista se representa y se adjunta al DOM. Usted pensaría que ya que "quitó" su vista anterior del DOM, simplemente desaparecería, ¿verdad? Bueno, lo hace --- desde el DOM --- pero no desde la memoria! Como esa vista aún tiene eventos vinculados al DOM, no obtiene la recolección de basura. Cuando se activa un elemento DOM que estaba vinculado a alguna vista anterior (como al hacer clic en él), las vistas actuales, así como todas las vistas antiguas, no dispuestas, todavía están vinculadas a él, y todas ellas responden al disparador. Eso es lo que te está pasando. Aquí, vean este violín que cociné.

Como arreglarlo

La forma de salir de esto es mantener una referencia a la vista alrededor, para que pueda desecharla correctamente. Entonces, por ejemplo, podría adjuntar una referencia a la vista en su enrutador, y

 router.on('route:addUser',function(){ // If the view exists, remove it if (router.addUserView) { router.addUserView.remove(); router.addUserView.off(); } router.addUserView = new AddUserView(); router.addUserView.render(); }); 

Aquí llamamos Backbone.View.remove (), que realmente hace this.$el.remove() detrás de las escenas, eliminando efectivamente los elementos DOM a los que hace referencia nuestra vista y liberando los eventos enlazados. Ahora nuestra vista puede ser recogida de basura!

Puede ver cómo respondí a esta pregunta recientemente para otro ángulo sobre esto: Guardar los datos del usuario más de una vez . Y creo que sería negligente si no incluyera el artículo seminal de Derick Bailey sobre vistas de zombis (de donde obtuve la mayor parte de mi información), ¡Zombies! ¡CORRER! (Gestionando Transiciones de Página en Aplicaciones Backbone)