淘汰賽JS無法從observableArray中刪除對象

Question

我有兩種填寫ObservableArray的方法，一種用於測試目的，一種用於我打算使用此數組的方式。

第一種方法是定義這些對象，然后一次將其推入其中；第二種方法是，讀取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適用於手動創建的對象，但對導入的對象卻失敗。 我現在不確定自己在做什么錯，有人看到過類似的東西嗎？

我從這篇文章中獲取了穿梭菜單代碼

Answer 1

您要添加的項目具有重要區別。

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？）。

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

如果某個屬性始終是可觀察的，則可以直接將其“展開”： item.id() 。 如果有時可以觀察到，則可以使用ko.unwrap(item.id) 。

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

Answer 2

使用下划線js操作數組非常容易

您可以通過以下代碼輕松刪除KO可觀察數組中的項目。

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

toRemove是要從數組中刪除的對象。