Rebinding Knockout Click Event

Question

I have a list of items that have bindings to a click event using Knockout.js.

<a data-bind="attr: { title: 'Edit ' + ContactName() }, click: $parent.preEditContact" title="Edit Contact"></a>

This function works perfectly. The problem arises when I add a new record to the knockout list I call a sort function that sorts the knockout list alphabetically.

The sort function orders the list, empties it and then appends the reordered list.

When this is done the knockout items lose their click binding parent.preEditContact

How can I rebind the click event?

Answer 1

Instead of using my makeshift sort code there is actually sort functions available with Knockout.js that retains the click bindings.

The code used to sort a list while retaining the click bindings is as follows:

self.Contacts.sort(function(a,b){
 var a1 = a.ContactName().toLowerCase();
 var b1 = b.ContactName().toLowerCase();
 return a1.localeCompare(b1);

});