将同一 viewModal 的两个不同实例绑定到两个不同的 div 时发生冲突

Question

正如我们在 example 中看到的那样，当我尝试 select 列表 2 中也存在于列表 1 中的项目时，该项目被 select 编入列表 1 而不是select编入清单 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 细节的问题都可以问我。

Answer 1

见http://jsfiddle.net/dgnLwjs0/5/

您的 groupId 最终成为输入的 ID，因此您最终得到多个 <input id='1'..，这是无效的。在两个列表之间使用不同的 groupId。即

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'

将同一 viewModal 的两个不同实例绑定到两个不同的 div 时发生冲突

Conflict when binding two different instances of same viewModal to two distincts div with knockout

knockout.js