Question

我有一个搜索页面和一个编辑页面。我搜索用户，然后当我得到结果时，我能够编辑用户。我使用CanJS，并为每个页面定义了路线。

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

在FormUser中，我有一个saveButton的click事件。如果我搜索用户，然后按编辑按钮，更改一些内容并保存更改，它可以正常工作。但是，如果在保存之后，我回到搜索页面并执行与之前相同的操作，则会调用保存按钮两次。我不知道为什么会这样。我做错了什么？

修改我做到了。每当我点击一个新的编辑按钮时，某个视图被放置在另一个视图之上，它就不会替换旧视图。

所以我尝试了这个并且它有效：

, '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中删除元素时，可以自动为您调用destroy，因此这是缺少的步骤。

因此，可能不是重复使用相同的元素，而是先添加一个元素，然后将新创建的元素传递给控件。类似的东西：

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

按钮被多次调用

1 个答案: