Backbone/jQuery 移动重复视图

Question

我的 Backbone、RequireJS 和 jQuery 移动应用程序遇到一些问题。当我使用表单视图两次时，表单提交事件会被触发两次。每个新视图都会添加到正文中，并且先前的视图将被删除。为此，我在 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();
    });
})

路由器.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();      
    }

  });
});

我已将代码上传到我网站上的目录： http://rickdoorakkers.nl/np2如果您执行以下步骤，您将看到问题：

1. 添加项目
2. 添加具有不同名称的第二个项目
3. 单击打开项目并更改值并保存
4. 正如您所看到的，添加项目的事件已启动，并且添加了一个项目而不是更改了项目。
5. 当您尝试依次更改 2 个项目时，也会出现同样的问题。然后编辑第一个项目。

有人可以告诉我我做错了什么吗？

谢谢！

Answer 1

Rido，你的代码对我来说真的很难阅读，因为它混合了一些东西，并且没有遵循 Backbone 的任何常见约定。

对于您的具体问题，我感觉问题在于您将编辑视图和新视图绑定到正文（el：body），两者都响应事件提交，并且您永远不会清楚地清理视图，所以我 思考 每当您添加项目然后编辑它时，添加视图仍然在内存中，仍然绑定到提交事件，并且仍然使用新名称应答调用=新项目，而不是编辑。

通过在添加后添加对 stopListening 的调用，以肮脏的方式修复很“容易”，但真正的问题是您绑定到主体，并将骨干路由器和手动哈希控制+其他奇怪的模式混合在一起，例如获取每 5 行收集一次（您可以在应用程序开始时创建一个并始终使用它！这里是本地存储，所以没关系，但如果你移动到远程存储，你会后悔的......fetch() 重置集合并完全重新加载！）。我可以建议你尝试重写这个而不关心 jQuery mobile，只是尝试让它与 Backbone.Router + 单个集合 + 不绑定到正文，而是动态创建视图并将它们附加到正文/删除你什么时候完成？您会发现错误将不再那么奇怪并且更容易跟踪。