淘汰赛JS无法从observableArray中删除对象

Question

I've got two ways that I'm filling in an observableArray, one for testing purposes and one for the way I intend on using this array.

The first way I'm defining these objects and pushing them in one at a time, the second way I'm reading a JSON stream and pushing them in with a loop.

Here's my code for this shuttle-menu I'm using.

var StateModel = function() {
    var self = this;
    // initialize containers
    self.leftStateBox = ko.observableArray();
    self.rightStateBox = ko.observableArray();

    // selected ids
    self.selectedLeftStateBox = ko.observableArray();
    self.selectedRightStateBox = ko.observableArray();

    self.moveLeft = function () {
        var sel = self.selectedRightStateBox();
        for (var i = 0; i < sel.length; i++) {
            var selCat = sel[i];
            var result = self.rightStateBox.remove(function (item) {
                return item.id == selCat;
            });
            if (result && result.length > 0) {
                self.leftStateBox.push(result[0]);
            }
        }
        self.selectedRightStateBox.removeAll();
    }

    self.moveRight = function () {
        var sel = self.selectedLeftStateBox();
        for (var i = 0; i < sel.length; i++) {
            var selCat = sel[i];
            var result = self.leftStateBox.remove(function (item) {
                return item.id == selCat;
            });
            if (result && result.length > 0) {
                self.rightStateBox.push(result[0]);
            }
        }
        self.selectedLeftStateBox.removeAll();
    }


    self.leftStateBox.push({
        id: "CAA"
        , name: 'State 1'
    });
    self.leftStateBox.push({
        id: "VAA"
        , name: 'State 2'
    });
    self.leftStateBox.push({
        id: "BAA"
        , name: 'State 3'
    });

    self.loadStates = function() {
        var self = this;
        $.getJSON("${baseAppUrl}/public/company/" + companyId + "/json/searchStates/list",
            function (searchStatesData) {
                var states = JSON.parse(searchStatesData).searchStates;
                for(var i = 0; i < states.length; i++) {
                    self.leftStateBox.push(new State(states[i]));
                }
            });
    };
    self.loadStates();
}        

var State = function (state) {
    var self = this;
    self.name = ko.observable(state.name);
    self.id = ko.observable(state.id);
}

$(function () {
    ko.applyBindings(new StateModel(), document.getElementById("statesBox"));
});

Here's my view section:

'<div id="statesBox">
    <div>
        Available States:
        <select multiple='multiple' data-bind="options: leftStateBox, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedLeftStateBox"></select>
    </div>
    <div>
        <p><button data-bind="click: moveRight">Add Selected</button></p>
        <p><button data-bind="click: moveLeft">Remove Selected</button></p>
    </div>
    <div>
        Selected States:
        <select multiple='multiple' data-bind="options: rightStateBox, optionsText: 'name', optionsValue: 'id', selectedOptions: selectedRightStateBox"></select>
    </div>
    <br /><br />
</div>'

When I try to shuttle things back and forth on the list it works for the three I manually entered in but it doesn't work for the ones imported through the JSON call. They all show up on the list though and seem to have the same information, I structured the manually created objects after how the JSON objects look. When I trace the JS function moveRight, the remove works for the manually created objects but fails on the imported ones. I'm not really sure what I'm doing wrong at this point, has anyone seen something like this?

I grabbed the shuttle menu code from this post

Answer 1

The items you're adding have an important difference.

self.leftStateBox.push({
    id: "BAA"
    , name: 'State 3'
});

...

var State = function (state) {
    var self = this;
    self.name = ko.observable(state.name);
    self.id = ko.observable(state.id);
}

The first have non-observable property values and the second have observable property values. In general, you should only make things observable if they need to be so (are you ever going to want to change the name or id of an item?).

var State = function (state) {
    var self = this;
    self.name = state.name;
    self.id = state.id;
}

If a property is always observable, you can just "unwrap" it directly: item.id() . If it may sometimes be observable, you can use ko.unwrap(item.id) .

var result = self.rightStateBox.remove(function (item) {
    return ko.unwrap(item.id) == selCat;
});

Answer 2

Manipulating arrays is very easy by using underscore js

you can easily remove an item in KO observable array by the following code.

 self.rightStateBox(_.without(self.rightStateBox(), toRemove));

toRemove is the object to remove from the array.