Backbone / jQuery mobile дубликат просмотра

0

У меня проблемы с мобильным приложением 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. Если вы выполните следующие шаги, вы увидите проблему:

  1. Добавить проект
  2. Добавьте второй проект с другим именем
  3. Откройте проект, нажав на него, изменив значения и сохраните их
  4. Как вы видите, запускается проект добавления проекта, и вместо него добавляется проект.
  5. Эта же проблема возникает и при попытке изменить 2 проекта друг за другом. Затем первый проект редактируется.

Есть ли кто-нибудь, кто может сказать мне, что я делаю неправильно?

Благодарю!

Теги:
jquery-mobile
backbone.js

1 ответ

1
Лучший ответ

Ридо, ваш код действительно трудно читать для меня из-за того, как он смешивает несколько вещей и не следует каким-либо обычным соглашениям для Backbone.

Для вашей конкретной проблемы у меня возникло ощущение, что вы привязываете как Edit, так и New view к телу (el: body), как реагируете на событие submit, так и вы никогда не очищаете взгляды, поэтому я подумайте, что всякий раз, когда вы добавляете проект, а затем редактируете его, представление добавления все еще находится в памяти, все еще привязанное к событию отправки и по-прежнему отвечающее на вызов = новый проект с новым именем вместо редактирования.

"Легко" исправлять грязным способом, добавляя вызов stopListening после добавления, но реальная проблема заключается в том, что вы привязываетесь к телу и смешиваете соединения с Backbone Router и ручным хеш-контролем + другие странные шаблоны, такие как выборка сбор каждые 5 строк (вы могли бы просто создать его в начале приложения и всегда использовать его! вот он localstorage, так что это не имеет значения, но если вы когда-нибудь перейдете на удаленное хранилище, вы пожалеете об этом... fetch() сбросить сбор и выполнить полную перезагрузку!). Могу ли я предложить вам, возможно, попытаться переписать это, не заботясь о мобильном устройстве jQuery и просто попытаться заставить его работать с Backbone.Router + с одной коллекцией + не привязываться к телу, а вместо этого создавать представления "на лету" и добавлять их в тело/удалить когда вы закончите? Вы увидите, что ошибки будут менее странными и легче отслеживать.

  • 0
    Привет, спасибо за ответ! Я только начал переписывать свой код, и я надеюсь, что на этот раз я делаю это правильно. Не могли бы вы проверить мой новый код по адресу: rickdoorakkers.nl/np2 Но теперь у меня возникла странная проблема с jQuery Mobile, и я не знаю, что ее вызывает. Когда вы несколько раз переключаетесь между списком и представлением добавления, вы увидите, что стиль исчез после третьего переключения. И я прочитал свой код несколько раз, но я думаю, что теперь все правильно. Спасибо за помощь!
  • 0
    Ридо, код выглядит лучше! Если вам нужно перенаправить, я бы лучше использовал Backbone.history.navigate ("# project", {trigger: true}), чтобы изменить страницу, чем window.location = "#project", но я думаю, что это технически это точно так же.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню