Pause-able / Resume-able events in CanJS

Hi there, 

I have a short question. Perhaps I should first describe my use-case. In my spare-time I am trying to program something like a miniature LinkedIn where I can maintain my work experience and education data. The next step would be to connect the LinkedIn API and try to get my data from the platform.

I have an overview of the currently maintained entries at the top and when I want to edit an entry I will hit an edit button. This will show the item (which should be edited) also under the table in a form prefilled with all the entries (like start date, degree, institution etc.). So the main problem is that an item (which has a binding on the change event) will be shown twice (in the overview table and in the maintain form). So when I change an entry in the editable form the overview table will automatically change which I think will confuse the user. My first attempt was to copy the item which should be edited but unfortunately this didn't worked for me.

So I wanna ask is there something like a pause for an event listenting until the user confirmed or cancelled the editing of the entry and then the event listening will be resumed. So the edited item should become 'deaf' for a defined time such that a change in the maintain form will not automatically change the overview table.

I found an old thread here, but I guess this does not apply for canJS? link:  https://forum.javascriptmvc.com/topic/pause-able-resume-able-events

I tried to program a workaround with the following two functions. The first function will save the currently attached/bound events for a given eventName and then unbinds all events from a given item => pause event listening (item will become 'deaf' for a specific event). The second function will then rebind the saved event handlers to the given item => resume event listening

Here are the functions. Is there any more elegant way to do this? I think the main problem is that I read some data from internal properties e.g. like __bindEvents which could be renamed or dropped in future releases and hence would lead to problems and incompatibility of the code.              

1. ...
2. // unbind an event with the given eventName from the given item
3. // the eventHandler for the event with the eventName will be temporary
4. // stored in 'this.tmpChangeEventHandler'
5. _unbindAndSaveEventHandler: function(eventName, item) {
6.       // get the event handler from the item
7.       var eventHandler = item.__bindEvents[eventName];
8.  
9.       for(var key in eventHandler) {
10.             if(isNaN(key)) {
11.                   // only store the real event handler
12.                   continue;
13.             }
14.               this.tmpChangeEventHandler.push(eventHandler[key].handler);
15.       }
16.       // after we saved the event handler => let's unbind the event
17.       // this will make the item 'deaf' for those event
18.       // until we rebind the handlers back to the item
19.       item.unbind(eventName);
20. },
21.  
22. // rebind the temporary stored event handler to the event with the 
23. // given eventName to the given item
24. _rebindEventHandler: function(eventName, item) {
25.       // let's rebind the stored event handler to the item
26.       if(this.tmpChangeEventHandler.length > 0)
27.       {
28.             for(var key in this.tmpChangeEventHandler) {
29.                   item.bind(eventName, this.tmpChangeEventHandler[key]);
30.             }
31.       }
32.       // reset the array with all the saved event handler
33.       this.tmpChangeEventHandler = new Array();
34. },
35. ...

Best Regards and thanks in advance

Patrick