Question

我有两个数据列表，想要将它们合并到一个带有挖空映射的列表中。

如果我定义要比较的键，这似乎可以正常工作，除了它删除了最新更新中未列出的项目。

有没有办法将KO Mapping用于数组而不删除最新列表中没有出现的项？

下面的EG，应该产生：

1 A B
2 AA BB
3 AAA
4 BBB

不是

1 A B
2 AA BB
4 BBB


    <ul data-bind='foreach: mergedList'>
        <li>
            <span data-bind='text: id'></span>
            <span data-bind='text: a'></span>
            <span data-bind='text: b'></span>
        </li>
    </ul>

    var listA = [
        { id: 1, a: 'A'},
        { id: 2, a: 'AA'},
        { id: 3, a: 'AAA'}
    ];
    var listB = [
        { id: 1, b: 'B'},
        { id: 2, b: 'BB'},
        { id: 4, b: 'BBB'}
    ];

    var mapping = {
        key: function(data) {
            return ko.utils.unwrapObservable(data.id);
        },
        create: function (options){
            var model = new subViewModel();
            ko.mapping.fromJS(options.data, {}, model);
            return model;
        }
    }

    var subViewModel = function(){
        var self = this;
        self.a = ko.observable();
        self.b = ko.observable();
    }

    var viewModel = function(){
        var self = this;
        self.mergedList = ko.observableArray();
    }

    var vm = new viewModel();
    ko.mapping.fromJS(listA, mapping, vm.mergedList);
    ko.mapping.fromJS(listB, mapping, vm.mergedList);
    ko.applyBindings(vm);

http://jsfiddle.net/BQRur/9/

Answer 1

我知道这个问题很老，所以这可能对卢克没有帮助，但它可能会帮助那些从谷歌来到这里的人（比如我）。我最近遇到了类似的问题并在淘汰赛论坛上得到了帮助： https://groups.google.com/forum/#!topic/knockoutjs/22DzjfgUzMs

祝你好运！

Answer 2

阻止您使用Computed Observable产生此行为的原因是什么？

ko.mapping.fromJS(listA,mapping,vm.listA);
ko.mapping.fromJS(listB,mapping,vm.listB);

vm.mergedList= ko.computed(function(){
return listA().concat(listB());
});

Answer 3

这样的事情会满足你的需求吗？

    var listA = ko.observableArray([
        { id: 1, a: 'A'},
        { id: 2, a: 'AA'},
        { id: 3, a: 'AAA'}
    ]);

    var listB = ko.observableArray([
        { id: 1, b: 'B'},
        { id: 2, b: 'BB'},
        { id: 4, b: 'BBB'}
    ]);

    function viewModel () {
        var self = this;

        self.mergedList = ko.computed(function () {
            var result = [];

            // Build an associative array, ensure the object shape is defined as a default, or the bindings will fail on the missing entries (id 3 missing b, id 4 missing a).
            $.each(listA().concat(listB()), function (i, o) {
                result[o.id] = $.extend({}, result[o.id] || { id: null, a: null, b: null }, o);
            });

            // Extract only the entries from the associative array.
            result = $.map(result, function (o) {
                return o;
            });

            return result;
        });
    }

    var vm = new viewModel();
    ko.applyBindings(vm);

    // Async requests to update listA / listB here.

我不得不依赖jquery来完成上述工作，但是如果你删除jquery依赖，原则是一样的。映射不会解决该特定问题，因为密钥将用于删除未出现在listB中的项目。

将多个源的Knockout映射到单个列表中，而不删除未列出的项目

3 个答案: