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 &lt; sel.length; i++) {
            var selCat = sel[i];
            var result = self.rightStateBox.remove(function (item) {
                return item.id == selCat;
            });
            if (result &amp;&amp; result.length > 0) {
                self.leftStateBox.push(result[0]);
            }
        }
        self.selectedRightStateBox.removeAll();
    }

    self.moveRight = function () {
        var sel = self.selectedLeftStateBox();
        for (var i = 0; i &lt; sel.length; i++) {
            var selCat = sel[i];
            var result = self.leftStateBox.remove(function (item) {
                return item.id == selCat;
            });
            if (result &amp;&amp; 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 &lt; 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时，删除适用于手动创建的对象，但在导入的对象上失败。我现在还不确定自己做错了什么，有没有人见过这样的事情？

我抓住了this post

的班车菜单代码

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

如果一个属性总是可以观察到的，你可以只是打开＆＃34;展开＆＃34;直接：item.id()。如果有时可以观察到，您可以使用ko.unwrap(item.id)。

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

Answer 2

使用underscore js

操作数组非常简单

您可以通过以下代码轻松删除KO可观察数组中的项目。

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

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

Knockout js无法从observableArray中删除对象

2 个答案: