在ko.observableArray模型绑定问题中将项目下移

Question

Edit

Apparently the logic is correct. I suspect the issue is with how I'm binding my View Model from the JSON response of our API. I've added more code to try and help diagnose the issue.

Am I binding the view model correctly?

Original post

I'm not asking how to move items around in an observableArray, I got my code to move items up and down inside an array from here: How do I swap two items in an observableArray?

Moving up by @Michael Best: https://stackoverflow.com/a/10630319/1888402

Moving down by @Moes: https://stackoverflow.com/a/26726556/1888402

The problem I'm having is moving the item down. It moves up just fine, the issue seems to be with the logic.

JSON Model

{
  "Options": {
    "SelectedHeader": "Left Header",
    "AvailableHeader": "Right Header"
  },
  "Selected": [
    {
      "Order": 2,
      "ID": 1,
      "Label": "Duration"
    },
    {
      "Order": 11,
      "ID": 5,
      "Label": "Metres / Min"
    },
    {
      "Order": 23,
      "ID": 7,
      "Label": "Sprint Dis/Min"
    },
    {
      "Order": 9,
      "ID": 15,
      "Label": "Max Velocity"
    },
    {
      "Order": 6,
      "ID": 16,
      "Label": "Hi Intensity Running"
    }
  ],
  "Available": [
    {
      "ID": 123,
      "Label": "I'm Available"
    }
  ],
  "WebServiceMethodUrl": "../../../Services/SomeAsmxService.asmx/SaveStuff"
}

View Model

         function ViewModel(){
            var self = this;
            self.Options = model.Options
            self.Available = ko.observableArray(model.Available);
            self.Selected = ko.observableArray(model.Selected);
            self.WebServiceMethodUrl = model.WebServiceMethodUrl;
            self.addSelected = function(item){
                item.Order = self.Selected().length;
                self.Available.remove(item);
                self.Selected.push(item);
            };
            self.removeSelected = function(item){
                self.Available.push(item);
                self.Selected.remove(item);
            };
            self.moveUp = function(item) {
                var i = self.Selected.indexOf(item);
                if (i >= 1) {
                    var array = self.Selected();
                    self.Selected().splice(i-1, 2, array[i], array[i-1]); //Works fine
                    item.Order = i;
                }
            };
            self.moveDown = function(item) {
                var i = self.Selected.indexOf(item);
                if (i < self.Selected().length - 1) {
                    var array = self.Selected();
                    self.Selected().splice(i, 2, array[i + 1], array[i]);
                    item.Order = i;
                    self.Selected.valueHasMutated(); //Force rebind
                }
            };
            self.SaveIt = function(){
                postDataAsync(self.WebServiceMethodUrl, "{queryString: '"+ ko.toJSON(self) + "'}", "Could not save settings.", function (resp){});
            }
            self.sortedSelected = ko.computed(function(){
                return self.Selected().sort(function(left, right) { return left.Order == right.Order ? 0 : (left.Order < right.Order ? -1 : 1) });
            });
        }



        var vm = new ViewModel();

        ko.applyBindings(ViewModel);

HTML & Bindings

 <!-- ko if: sortedSelected().length -->
   <tbody data-bind="with:sortedSelected">
        <!-- ko foreach: Selected -->
            <!-- ko ifnot: (ID == 0) -->
                <tr>
                    <td class="order">

                        <p data-bind="click: moveUp, clickBubble: false"><i class="fa fa-arrow-up"></i></p>
                        <p data-bind="text: $index() + 1"></p>
                        <p data-bind="click: moveDown, clickBubble: false"><i class="fa fa-arrow-down move-down"></i></p>
                    </td>
                    <td data-bind="text:Label, attr: { id: ID }"></td>
                    <td><a class="remove" data-bind="click: removeSelected, clickBubble: false">Remove&nbsp;&nbsp;<i class="fa fa-arrow-circle-o-right"></i></a></td>
                </tr>
            <!-- /ko-->
        <!-- /ko-->
    </tbody>
    <!-- /ko -->

So if I was to call the moveDown function on item 5, it should then become item 6 and item 6 should become item 5. Not sure why this isn't working since it's just the logic being inverted.

Example

JSFiddle

Answer 1

The problem is with your sortedSeleted computed. Any time Selected is modified, the computed will be reevaluated because it has a dependency on Selected . When the computed is evaluated it sorts Selected . You may have not realized that sort modifies the array it is called on while also returning the array. This sorting by Order is what's making the moveUp and moveDown functions appear inconsistent.

You most likely want to sort a copy of Selected . As @RoyJ pointed out, you can use slice to get a shallow copy of an array.