Кнопка вызывается несколько раз

Question

У меня есть страница поиска и страница редактирования. Я ищу пользователя, а затем, когда я получаю результаты, я могу редактировать пользователя. Я использую CanJS, и я определил маршруты для каждой страницы.

, 'search route': function (data) {
    new FormUserQuery('#formArea', {});
    }
}
, 'edit/:id route': function (data) {
    new FormUser('#formArea', {}).renderView(+data.id);
    }
}

В FormUser у меня есть событие click для saveButton. Если я ищу пользователя, а затем нажимаю кнопку редактирования, что-то меняю и сохраняю изменения, все работает нормально. Но если после сохранения я возвращаюсь на страницу поиска и выполняю те же действия, что и раньше, кнопка сохранения вызывается дважды. Я понятия не имею, почему это происходит. Что я делаю неправильно?

Изменить Я сделал это работает. Всякий раз, когда я нажимал на новую кнопку редактирования, каким-то образом вид располагался поверх другого, он не заменял старый.

Я попробовал это, и это сработало:

, 'search route': function (data) {
   if (typeof self.form === 'undefined')
   {
    self.form = new MegaControl.FormUserQuery('#formArea', {});
   }
   else {
    self.form.destroy();
    self.form = new MegaControl.FormUserQuery('#formArea', {});
   }

}
, 'edit/:id route': function (data) {
 if (typeof self.form === 'undefined') {
  self.form = new MegaControl.FormUser('#formArea', {})
  self.form.renderView(+data.id);
 }
 else {
  self.form.destroy();
  self.form = new MegaControl.FormUser('#formArea', {});
  self.form.renderView(+data.id);
 }
}

Answer 1

Вам не нужно вызывать команду destroy вручную, как вы это делаете. Проблема в том, что вы используете один и тот же элемент DOM для обоих представлений (#formArea).

Может вызвать вызов уничтожить автоматически для вас, когда элемент удален из DOM, так что это шаг, который отсутствует.

Поэтому, возможно, вместо повторного использования одного и того же элемента, вы могли бы сначала добавить элемент и передать этот вновь созданный элемент в элемент управления. Что-то вроде:

'search route': function (data) {
    $('#formArea').empty(); // this will remove previous elements and trigger destroy automatically
    var view = $('<div>'); 
    $('#formArea').append(view); 
    new FormUserQuery(view, {});
}