버튼이 여러 번 호출되었습니다.

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

당신은 당신이 일을 수동으로 파괴 호출 할 필요는 없습니다. 문제는 두보기 (#formArea)에 동일한 DOM 요소를 사용하고 있다는 것입니다.

요소가 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, {}); 
}