Knockout.js 使用knockout将同一viewModal的两个不同实例绑定到两个distincts div时发生冲突

正如我们在本文中看到的，当我尝试选择列表2中也存在于列表1中的项目时，该项目在列表1中被选中，而不是在列表2中被选中

var viewModel = function (_index, _params) {
    var self = this;

$('#volatile-select-' + _index + ' input[type=text]').focus(function () {
    $('#volatile-select-' + _index + ' .volatile-select-body').show();
});

self.filter = ko.observable('');
self.selectedItems = ko.observableArray();
self.callbackList = _params.value;
self.items = _params.options;

self.filteredItems = ko.computed(function () {
    var filter = self.filter().toLowerCase().replace(/ /g, '');

    if (!filter) return self.items;
    else return ko.utils.arrayFilter(self.items, function (o) {
        var match = false;
        ko.utils.arrayForEach(o.Sectors, function (s) {
            var fullName = (o.Name + s.Name).replace(/ /g, '').toLowerCase();
            if (fullName.indexOf(filter) > -1) {
                match = true;
                return;
            }
        });
        return match;
    });
}).extend({
    throttle: 500
});
self.filteredSectors = function (i) {
    var filter = self.filter().toLowerCase().replace(/ /g, '');

    if (!filter) return i.Sectors;
    else return ko.utils.arrayFilter(i.Sectors, function (s) {
        var fullName = (i.Name + s.Name).replace(/ /g, '').toLowerCase();
        return (fullName.indexOf(filter) > -1);
    });
};

self.focus = function () {
    $('#volatile-select-' + _index + ' input[type=text]').focus();
};
self.close = function () {
    self.filter('');
    $('#volatile-select-' + _index + ' .volatile-select-body').hide();
};
self.clear = function () {
    self.close();
    self.selectedItems.removeAll();
};

self.isUpdatingSelectedItems = false;
self.selectedItems.subscribe(function (changes) {
    if (self.isUpdatingSelectedItems) return;

    self.isUpdatingSelectedItems = true;
    changes.forEach(function (change) {
        ko.utils.arrayForEach(self.items, function (item) {
            if (change.status === 'added' && item.GroupId == change.value) ko.utils.arrayForEach(item.Sectors, function (s) {
                if (self.selectedItems.indexOf(s.GroupId) == -1) self.selectedItems.push(s.GroupId);
            });
            if (change.status === 'deleted' && item.GroupId == change.value) ko.utils.arrayForEach(item.Sectors, function (s) {
                if (self.selectedItems.indexOf(s.GroupId) > -1) self.selectedItems.remove(s.GroupId);
            });
        });
    });
    self.callbackList(ko.utils.arrayFilter(self.selectedItems(), function (si) {
        return ko.utils.arrayFirst(self.items, function (o) {
            return o.GroupId == si;
        }) === null;
    }));
    self.isUpdatingSelectedItems = false;
}, null, 'arrayChange');

})

有关viewModel中详细信息的任何问题，请咨询我。

请参阅

---

您的groupId最终成为输入的id，因此您最终得到了多个

小提琴有点难用，输入字段没有显示它们应该显示的所有内容。你能清理一下吗？@AnotherDev修复了fliddle上的css，并更新了指向示例的链接
var params = {
'options': [{
    'GroupId': '1',
        'GroupType': '2',
        'Name': 'Local 1',
        'Sectors': [{
        'GroupId': '2',
            'Name': 'Setor 1'
    }, {
        'GroupId': '3',
            'Name': 'Setor 2'
    }]

params = {
'options': [{
    'GroupId': '111',
        'GroupType': '2',
        'Name': 'Local 1',
        'Sectors': [{
        'GroupId': '222',
            'Name': 'Setor 1'
    }, {
        'GroupId': '333',
            'Name': 'Setor 2'