How to write Sort and Reverse function in Knockout.js?

Question

This is my code with KnockoutJS:

var viewModel = function () {
  var self = this;

  self.items = ko.observableArray([
    { name: "Item 1", value: 1 },
    { name: "Item 2", value: 2 },
    { name: "Item 3", value: 3 },
  ]);

  self.addItem = function () {
    self.items.push({ name: "New Item", value: self.items().length + 1 });
  };

  self.removeItem = function (item) {
    self.items.remove(item);
  };

  self.sortItems = function () {
    self.items.sort(function (a, b) {
      return b.value - a.value;
    });
  };

  self.reverseItems = function () {
    self.items.reverse();
  };
};

ko.applyBindings(new viewModel());

I want to make sort and reverse method for arrays in knockoutJS, and that i make those but they are not working and that i dont recognise why there aren't operating!!!

How do you know it's not working? Does anything happen? Have you verified that the functions are being called? Are errors reported? — Pointy
– Pointy, Commented Apr 7, 2023 at 13:26
I think the example at jsfiddle.net/martlark/z85hte9j/5 makes sense — Andrina Websdale
– Andrina Websdale, Commented Apr 12, 2023 at 10:49

Brother Woodrow · Accepted Answer · 2023-04-09 14:20:50Z

4

I don't think the accepted answer is correct. Both sort and reverse are built-in and do not require you to call valueHasMutated in order to work, as you can see here. There must be some other issue with your code we're not seeing.

answered Apr 9, 2023 at 14:20

Brother Woodrow

6,3923 gold badges22 silver badges24 bronze badges

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

1 Comment

parisadz Over a year ago

I tried this code and it worked.

Martlark · Accepted Answer · 2023-04-11 01:09:49Z

4

The problem is that the sortItems method has an incorrect comparison, you need to swap a and b. See: https://jsfiddle.net/martlark/z85hte9j/5/

It should be:

self.sortItems = function () {
  self.items.sort(function (a, b) {
   return a.value - b.value;
 });
};

answered Apr 11, 2023 at 1:09

Martlark

14.6k14 gold badges86 silver badges103 bronze badges

Comments

yunes Mohammady · Accepted Answer · 2023-04-07 13:26:04Z

2

The bug in this example is that if you try to sort or reverse the items array, the data-bindings in the HTML will not update to reflect the new order of the items. This is because the sortItems() and reverseItems() functions do not call the valueHasMutated() method on the items observableArray after changes have been made.

To fix this bug, you can add self.items.valueHasMutated(); at the end of both the sortItems() and reverseItems() functions.

answered Apr 7, 2023 at 13:26

yunes Mohammady

832 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to write Sort and Reverse function in Knockout.js?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related