Vue en double mobile de l'épine dorsale / jQuery

Question

J'ai des problèmes avec mon application Mobile Backbone, requirejs & jQuery. Lorsque j'utilise un formulaire Voir 2 fois, l'événement de soumission de formulaire est licencié deux fois. Chaque nouvelle vue est ajoutée au corps et la vue précédente sera supprimée. Pour cela, j'utilise ce code dans mon fichier app.js:

$(document).on("mobileinit", function () {
    $.mobile.linkBindingEnabled = false;
    $.mobile.hashListeningEnabled = false;

    $(document).on('pagehide', 'div[data-role="page"]', function (event, ui) {
        $(event.currentTarget).remove();
    });
})

Router.js

define([
  'jquery',
  'backbone',
  'views/projects/ProjectsView',
  'views/projects/AddProjectView'
], function($, Backbone, ProjectsView, AddProjectView) {

  return Backbone.Router.extend({

    routes: {
      'addProject': 'addProject',
      'editProject/:projectId': 'editProject', 
      '*actions': 'showProjects' // Default
    },

    addProject: function() {
      new AddProjectView().render();
    },
    editProject: function(projectId) {
      require([
        "views/projects/EditProjectView", 
        "collections/ProjectsCollection", 
        "models/ProjectModel"
      ], function (EditProjectView, ProjectsCollection, ProjectModel) {
        var projectsCollection = new ProjectsCollection();
        projectsCollection.fetch();

        var project = projectsCollection.get(projectId);
        if (project) {
          var view = new EditProjectView({model: project, projectsCollection: projectsCollection});
          view.render();
        }
      });
    },


    showProjects: function() {
      new ProjectsView().navigate();      
    }

  });
});

J'ai téléchargé mon code sur un répertoire sur mon site Web: http://rickdoorakkers.nl/np2Si vous passez par les étapes suivantes, vous verrez le problème:

1. Ajouter un projet
2. Ajouter un deuxième projet avec un nom différent
3. Ouvrez un projet en cliquant dessus et modifiez les valeurs et enregistrez-la
4. Comme vous pouvez le voir, l'événement d'ajout d'un projet est lancé et il y a un projet ajouté au lieu de changer.
5. Ce même problème se produit également lorsque vous essayez de changer 2 projets les uns après les autres. Le premier projet est alors modifié.

Y a-t-il quelqu'un qui peut me dire ce que je fais de mal?

Merci!

Answer 1

Rido, votre code est vraiment difficile à lire pour moi en raison de la façon dont il mélange quelques choses et ne suivant aucune des conventions habituelles pour la colonne vertébrale.

Pour votre problème spécifique, j'ai le sentiment que le problème est que vous liez à la fois la vue d'édition et la nouvelle vue sur le corps (El: Body), les deux répondent à l'événement soumettre, et vous ne nettoyez jamais clairement les vues, donc je pense que chaque fois que vous ajoutez un projet, puis le modifiez, la vue ADD est toujours en mémoire, toujours liée à l'événement de soumission et répondant toujours au projet Call = nouveau avec le nouveau nom, au lieu de l'édition.

C'est `` facile '' à réparer de manière sale, en ajoutant un appel à l'arrêt après l'ajout, mais le vrai problème est que vous vous liez au corps et que vous mélangez le routeur de la squelette et le contrôle du hachage manuel + d'autres modèles étranges, tels que la récupération La collection toutes les 5 lignes (vous pouvez simplement en créer une au début de l'application et toujours l'utiliser! Ici, c'est localstorage, donc cela n'a pas d'importance, mais si vous passez à un stockage distant, vous le regretterez ... récupérer () Réinitialisez la collection et faites un rechargement complet!). Puis-je vous suggérer peut-être d'essayer de réécrire cela sans se soucier de jQuery Mobile et d'essayer de le faire fonctionner avec Backbone.Router + une seule collection + pas de liaison au corps, mais plutôt, créez les vues à la volée et ajoutez-les au corps / enlever quand tu as fini? Vous verrez que les bogues seront moins bizarres et plus faciles à suivre.