Sort array without redrawing content

Question

I'm trying to sort users by online property:

var userViewModel = function(data){
    var self = this;
    self.name = ko.observable(data.name);
    self.online = ko.observable(data.online);
};

var mainViewModel = function(data){
    var self = this;
    self.users = ko.observableArray(data.users.map(function(user){
        var model = new userViewModel(user);
        model.online.subscribe(function(){
            self.users.sort(function (a, b) { return b.online() - a.online(); });
        });
        return model;
    }));

    self.users.subscribe(function(){
        console.log('users have changed');
    });
};

HTML:

<div data-bind="foreach: users">
    Online: <div data-bind="text: online"></div>
    <div data-bind="text: name"></div>
</div>

Everything is working fine, but when changing online property, users are sorted and "users have changed" is logged. I understand it happens because I'm changing original array. What I want is - not to change original array, just display it sorted (like angular does it)

Use filter not sort. i guess if you use filter u ll get separate array with only logged in users. — Harry Bomrah
– Harry Bomrah, Commented Oct 17, 2013 at 8:29
Yes so make two arrays one offline and one online. filter them accordingly so you ll get all of them sorted in 2 different arrays which ll give you ability to perform some actions on a particular set and also if someone goes offline then u just need to remove the element and put it in offline array and vice versa. — Harry Bomrah
– Harry Bomrah, Commented Oct 17, 2013 at 8:34

Damien · Accepted Answer · 2013-10-17 08:34:35Z

1

Just create a new computed that populates a sorted list of user.

var mainViewModel = function(data){
    var self = this;
    self.users = ko.observableArray(data.users.map(function(user){
        var model = new userViewModel(user);
        return model;
    }));
    self.sortedUsers = ko.computed(function(){
        var users = self.users();       
        users.sort(function (a, b) { return b.online() - a.online(); });       
        return users;
    });   
};

I hope it helps.

answered Oct 17, 2013 at 8:34

Damien

8,9873 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Sort array without redrawing content

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related