Sorting not working with Knockout and Isotope

问题:

Update: forgot the one question per question rule. Cut second question out of this one.

Trying to make a list of users sortable by different criteria with animation. Was already using Knockout so this demo seemed like a good direction to take. I switched to an Isotope 2.0 fork of the integration code here.

Sometimes the sorting doesn't update properly, as shown in this version - http://codepen.io/matelich/pen/PPoqdz - Medal and Component should have #0 and #1 switched from each other, but the ui doesn't update.

        switch (content) {
           case 'alphabetTab':  
              ViewModel.users.sort(function (u1, u2) { 
                 return u1.UserName.localeCompare(u2.UserName); 
              }); 
              break;
           case 'medalTab':
              ViewModel.users.sort(function(u1, u2) {
                 return u1.MedalScore < u2.MedalScore ? 1 : (u1.MedalScore > u2.MedalScore ? -1 : 0);
              });
              break;
          case 'componentTab':
             ViewModel.users.sort(function(u1, u2) {
                return u1.LearnedComponents < u2.LearnedComponents ? 1 : (u1.LearnedComponents > u2.LearnedComponents ? -1 : 0);
             });
        }
        for (i = 0; i < ViewModel.users().length; i++) {
           console.log(ViewModel.users()[i].UserName);
        }
        ViewModel.users.valueHasMutated();