Javascript 敲除js无法从ObservalArray中删除对象

我有两种填充ObservalArray的方法，一种用于测试，另一种用于我打算使用这个数组的方式

第一种方法是定义这些对象并一次将它们推入一个，第二种方法是读取JSON流并使用循环将它们推入

这是我正在使用的穿梭菜单的代码

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"));
});

以下是我的观点部分：

'<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>'

'
现有国家：
添加选定的

删除选定的

选定的国家：



'

当我尝试在列表上来回穿梭时，它对我手动输入的三个列表有效，但对通过JSON调用导入的列表无效。虽然它们都出现在列表中，并且似乎具有相同的信息，但我按照JSON对象的外观构造了手动创建的对象。当我跟踪JS函数moveRight时，remove对手动创建的对象有效，但对导入的对象无效。我真的不确定我在这一点上做错了什么，有人见过这样的事情吗

---

我从

中抓取了穿梭机菜单代码，您添加的项目有重要区别

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);
}

第一个具有不可观察的属性值，第二个具有可观察的属性值。一般来说，只有在需要的情况下，才应该使事物可见（您是否想要更改项目的名称或id？）

如果一个属性总是可见的，您可以直接“展开”它：

item.id（）

。如果有时可以观察到，可以使用

ko.unwrap（item.id）

---

通过使用

您可以通过以下代码轻松地删除KO observable数组中的项

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

---

toRemove是要从数组中删除的对象。

谢谢，我没有意识到使属性可见会产生这种效果。现在对我有用了！

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

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