Backbone.js routeur déclenchant sur mettre, pas sur poste

Question

J'ai donc travaillé avec Backbone.js de base pour créer une page de démonstration simple qui est un gestionnaire d'utilisateur de base. Je cours la même fonction si je crée (POST) ou met à jour (PUT) l'information d'un utilisateur. Les requêtes POST et PUT sont toutes deux réussies (appel de la fonction "succès") mais seule la commande PUT déclenchera le routeur, la requête POST ne déclenchera pas la même ligne de code alors qu'elle déclenchera la fonction de succès.

Ci-dessous le code de mes événements. La fonction saveUser prend en charge les requêtes PUT et POST, mais le routeur en cas de réussite est uniquement déclenché à partir d'une requête PUT réussie et non d'une requête POST réussie (même si les deux réussissent à mettre à jour la base de données).

events: { 
      'submit .edit-user-form': 'saveUser', 
      'click .delete': 'deleteUser' 
     }, 
     saveUser: function (ev) { 
      var userDetails = $(ev.currentTarget).serializeObject(); 
      var user = new User(); 
      reply = user.save(userDetails, { 
       success: function(){ 
        router.navigate('', {trigger: true}); 
       }, 
       error: function(){ 
        $("#editError").toggle(); 
        $("#editError").html("Error:<br/>"+reply.status+" : "+reply.statusText+"<hr/>"); 
       } 
      }); 
      return false; 
     }, 
     deleteUser: function (ev){ 
      $.ajaxSetup({ 
       headers: { 
        'method':"DeleteUser" 
       } 
      }); 
      reply = this.user.destroy({ 
       success: function(){ 
        router.navigate('', {trigger: true}); 
       }, 
       error: function(){ 
        $("#editError").toggle(); 
        $("#editError").html("Error:<br/>"+reply.status+" : "+reply.statusText+"<hr/>"); 
       } 
      }) 
      return false; 
     } 

Voici le code du routeur:

var Router = Backbone.Router.extend({ 
     routes:{ 
      'new': 'editUser', 
      'edit/:id': 'editUser', 
      '': 'home' 
     } 
    }); 
    var router = new Router(); 
    //ROUTES 
    router.on('route:home', function(){ 
     alert("1"); 
     userList.render(), 
     editUser.render({}); 
    }); 
    router.on('route:editUser', function(id){ 
     userList.render(); 
     editUser.render({id: id}); 
    }); 
    //NECESSARY 
    Backbone.history.start();` 

Toute aide serait appréciée!

Merci!

Answer 1

Le problème est que lorsque vous créez un nouvel utilisateur, vous êtes déjà à l'adresse "" et router.navigate(newUrl) ne se déclenche que si newUrl est différent de l'URL de la page courante.

Voir https://github.com/documentcloud/backbone/issues/652.

Pour fixer, changer

router.navigate('', {trigger: true}); 

Pour

Backbone.history.fragment = null; // Forces the current URL to be dirty 
router.navigate('', {trigger: true}); // Now, Backbone thinks the new URL is different 

Answer 2

Lorsque vous publiez, l'URL actuelle est "http://gocella.com/backbone/#", une fois que vous vous postez naviguer à "http://gocella.com/backbone/#" qui ne change pas l'URL, ce qui ne déclenchera pas l'événement. Le routeur ne déclenche l'événement que lorsque l'URL change, il fonctionne à partir de la mise à jour car lorsque vous cliquez sur éditer, votre URL change en "http://gocella.com/backbone/#/edit/1", puis le déclencheur change retour à "http://gocella.com/backbone/#"

Je pense que l'approche de l'utilisation du routeur pour ce problème est tout simplement incorrecte.

Vous devriez faire quelque chose de plus le long des lignes de: lorsque vous cliquez sur Enregistrer, créer un nouveau modèle ou mettre à jour le modèle existant avec les valeurs de formulaire, puis utilisez collection.create(modelFromForm) ou, si vous utilisez model.save, puis sur le rappel de succès, l'ajouter à la collection