4

我有两个数据列表，并希望将它们合并到一个带有敲除映射的列表中。

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

有没有办法使用 KO 映射到数组而不删除最新列表中未出现的项目？

下面的EG，应该产生：

  • 1 AB
  • 2 AA BB
  • 3 AAA
  • 4 血脑屏障

不是

  • 1 AB
  • 2 AA BB
  • 4 血脑屏障


    <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/

4

3 回答 3

1

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

祝你好运！

于 2013-12-11T09:31:23.870 回答
0

像这样的东西会满足您的需求吗？

    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 中的项目。

于 2013-11-08T00:27:30.600 回答
0

是什么阻止您使用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());
});
于 2013-07-29T16:42:42.877 回答