Visualização duplicada móvel de backbone/jQuery

Question

Eu tenho alguns problemas com meu backbone, requerjs e aplicativo móvel jQuery. Quando uso uma exibição de formulário 2 vezes, o evento de envio do formulário é disparado duas vezes. Cada nova visualização é adicionada ao corpo e a visão anterior será removida. Para isso, uso este código no meu arquivo 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();      
    }

  });
});

Eu carreguei meu código para um diretório no meu site: http://rickdoorakkers.nl/np2Se você seguir as etapas a seguir, verá o problema:

1. Adicione um projeto
2. Adicione um segundo projeto com um nome diferente
3. Abra um projeto clicando nele, altere os valores e salve -o
4. Como você pode ver, o evento de adicionar um projeto é lançado e há um projeto adicionado em vez de alterado.
5. Esse mesmo problema também ocorre quando você tenta alterar 2 projetos um do outro. O primeiro projeto é editado então.

Há alguém que pode me dizer o que estou fazendo de errado?

Obrigado!

Answer 1

RIDO, seu código é realmente difícil de ler para mim por causa da maneira como está misturando algumas coisas e não seguindo nenhuma das convenções usuais para a espinha dorsal.

Para o seu problema específico, sinto que o problema é que você vincula a visão de edição e a nova visão do corpo (El: Body), ambos respondem ao envio do evento, e você nunca está claramente limpando as vistas, então eu acho que sempre que você adiciona um projeto e edite -o, a visualização Add ainda está na memória, ainda vinculada ao evento de envio e ainda responde ao Call = New Project com o novo nome, em vez de editar.

É 'fácil' de corrigir de uma maneira suja, adicionando uma chamada para o stoplistening após a adição, mas o verdadeiro problema é que você é vinculativo ao corpo, e misturar o roteador de espinha dorsal e o controle manual de hash + outros padrões estranhos, como buscar A coleção a cada 5 linhas (você pode simplesmente criar uma no início do aplicativo e sempre usá -la! Aqui é LocalStorage, então não importa, mas se você se mudar para um armazenamento remoto, se arrependerá ... buscar () Redefina a coleção e faça uma recarga completa!). Posso sugerir que você tente reescrever isso sem se preocupar com o jQuery móvel e apenas tente fazê -lo funcionar com backbone.Router + uma única coleção + não vinculativa ao corpo, mas, em vez disso, crie as vistas em tempo real e anexá -las ao corpo / remover quando você estiver pronto? Você verá que os bugs serão menos estranhos e mais fáceis de rastrear.