Vista duplicata mobile backbone/jQuery

Question

Ho alcuni problemi con la mia applicazione mobile dorsale, Requisitijs e JQuery. Quando utilizzo una vista del modulo 2 volte l'evento di invio del modulo viene licenziato due volte. Ogni nuova vista viene aggiunta al corpo e la vista precedente verrà rimossa. Per questo utilizzo questo codice nel mio file 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();      
    }

  });
});

Ho caricato il mio codice su una directory sul mio sito Web: http://rickdoorakkers.nl/np2Se segui i seguenti passaggi, vedrai il problema:

1. Aggiungi un progetto
2. Aggiungi un secondo progetto con un nome diverso
3. Apri un progetto facendo clic su di esso e modifica i valori e salvalo
4. Come puoi vedere l'evento di aggiungere un progetto e c'è un progetto aggiunto invece di modificare.
5. Questo stesso problema si verifica anche quando si tenta di cambiare 2 progetti dopo l'altro. Il primo progetto è stato modificato allora.

C'è qualcuno che può dirmi cosa sto facendo di sbagliato?

Grazie!

Answer 1

Rido, il tuo codice è davvero difficile da leggere per me a causa del modo in cui sta mescolando alcune cose e non seguire nessuna delle solite convenzioni per la spina dorsale.

Per il tuo problema specifico, ho la sensazione che il problema sia che tu stia legando sia la vista di modifica che la nuova visione del corpo (el: corpo), entrambi rispondono all'evento invio e non stai mai chiaramente ripulindo le opinioni, quindi io pensare Che ogni volta che aggiungi un progetto e poi lo modifichi, la vista ADD è ancora in memoria, ancora vincolata all'evento di invio e risponde ancora al nuovo progetto Call = con il nuovo nome, invece di modificare.

È "facile" risolvere in modo sporco, aggiungendo una chiamata allo stop -istening dopo l'aggiunta, ma il vero problema è che ti stai legando al corpo e mescola il router spina dorsale e il controllo manuale hash + altri strani schemi, come il recupero La collezione ogni 5 righe (potresti crearne una solo all'inizio dell'app e usarla sempre! Eccolo LocalStorage in modo che non importa, ma se ti spostarai in una memoria remota, te ne pentirai ... prendi () Ripristina la raccolta e fai una ricarica completa!). Posso suggerirti forse provare a riscriverlo senza preoccuparti di JQuery Mobile e solo provare a farlo funzionare con la spina dorsale.Router + una singola collezione + non vincolando al corpo ma invece, crea le viste sul volo e aggiungono loro al corpo / rimuovi quando hai finito? Vedrai che i bug saranno meno strani e più facili da tracciare.