Backbone/jQuery 移动重复视图

Posted

技术标签:

【中文标题】Backbone/jQuery 移动重复视图【英文标题】:Backbone/jQuery mobile duplicate view 【发布时间】:2013-12-19 15:17:23 【问题描述】:

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

  );
);

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

    添加项目 添加另一个名称不同的项目 通过单击打开一个项目并更改值并保存它 正如您所见,添加项目的事件已启动,并且添加了一个项目而不是更改了一个项目。 当您尝试一个接一个地更改 2 个项目时,也会出现同样的问题。然后编辑第一个项目。

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

谢谢!

【问题讨论】:

【参考方案1】:

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

对于您的具体问题,我感觉问题在于您将编辑视图和新视图绑定到正文(el:正文),都响应事件提交,并且您从未清楚地清理视图,所以我认为每当你添加一个项目然后编辑它时,添加视图仍然在内存中,仍然绑定到提交事件并且仍然用新名称应答调用 = 新项目,而不是编辑。

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

【讨论】:

您好,感谢您的回答!我刚开始重写我的代码,我希望这次我做得对。请检查我的新代码:rickdoorakkers.nl/np2 但现在我遇到了一些奇怪的 jQuery Mobile 问题,我不知道是什么原因造成的。当您在列表和添加视图之间多次切换时,您会看到样式在第三次切换后消失了。而且我已经多次阅读我的代码,但我认为现在一切都是正确的。感谢您的帮助! Rido,代码看起来更好!如果您需要重定向,我宁愿使用 Backbone.history.navigate("#project", trigger: true) 来更改页面,而不是使用 window.location = "#project",但我想从技术上讲完全一样。 对于新的错误,呈现的 html 是正确的,但它缺少所有的类!原因是 jQuery mobile 不能自动处理动态内容。您需要在修改 DOM 后触发 DOM 上的“创建”事件以让 jQuery 执行操作。看到这个question。 啊,非常感谢!这解决了 CSS 样式的主要问题。但是现在我在列表页面出现了一个奇怪的问题:rickdoorakkers.nl/np2 当你添加一个项目并返回列表视图时,列表的第一项在顶部栏的后面。刷新页面时没问题,但在应用程序内部重定向后,第一项会消失在顶栏后面。 我做了一些快速测试,看来问题出在您的 .trigger("create") 上。您在视图中的 $el 上执行此操作,但我认为在这里您需要触发更高一级才能正确计算填充。尝试 $("body").trigger("create") 看看是否可以解决您的问题(我在控制台的调试点上尝试过它并修复了它,所以我有很好的希望)然后尝试缩小范围有些。 jQuery Mobile 看起来不是很好玩,祝你好运。

以上是关于Backbone/jQuery 移动重复视图的主要内容,如果未能解决你的问题,请参考以下文章

在 VSCode 中,如何为没有 package.json 的项目启用 Angular/Backbone/jQuery 智能感知?

在移动视图中段落文本无法正确换行 - (CSS)[重复]

如何使用 swift 在情节提要中从一个视图控制器移动到另一个视图控制器 [重复]

无法在 chrome 上的移动视图中取消选中复选框输入 [重复]

Bootstrap 4列顺序在移动设备上不起作用[重复]

如何向上移动视图“X”点?