Question

I am having difficulty resetting/refreshing/reloading an Isotope view based on a Knockout model. I have extended an earlier fiddle to remove and replace items but its unreliable and breaks sorting.

    self.reset = function () {
        // Remove all services
        $.each(self.services(), function (index, value) {
            var serviceToDelete = self.services()[0]
            self.removeService(serviceToDelete);
        })

        // Add some back
        self.services.push(new Service('some service', 'and this is a description', 7, '01/01/2000'));
        self.services.push(new Service('another service', 'just another description', 2, '02/01/2000'));
        self.services.push(new Service('driving school', 'learn to drive', 4, '10/01/2000'));
        self.services.push(new Service('ice cream sunday', 'sweet cold and delicious', 3, '01/01/2002'));
        self.services.push(new Service('tootie fruity', 'a rootie', 6, '01/01/2003'));
        self.services.push(new Service('hand gliding', 'you can see your house from here', 5, '01/01/2012'));
        self.services.push(new Service('turkey dinner', 'is not just for thanksgiving', 1, '01/01/2011'));                
    }

I have extended the following jsfiddle with a ‘Reset’ button which simply removes all items from an observableArray and readds them one by one.

http://jsfiddle.net/8uxKF/2/

1. It fails completely in IE10. The fiddles Run pane doesn’t even load.

2. It partially works in Chrome, but after resetting a console error is output whenever a sort is initiated:

   Uncaught TypeError: Object # has no method ‘sortBy’

3. In FF it works with a similar error as chrome. (but in my app fails to sort)

Can anyone help? I need sorting to work after resetting. I’m not sure if this is the ‘best’ way to reset as it seems to be causing issues.

Answer 1

I’ve reviewed the code and its fine, apart from one error on sortByID which I’ve corrected.

Frustratingly and embarrassingly it seems jsFiddle was blocking one of the resources due to mimetype mismatch when served from GitHub. Just to be clear this was an issue with running external scripts from GitHub within jsFiddle.

Final code posted to jsfiddle.net/8uxKF/3 for reference.