敲除递归映射问题 [英] knockout recursive mapping issue

问题描述

本文是该一个的后续文章.

我已更新代码，如下所示:

I've updated the code as followed:

viewModel.getQuotesSuccess = function (result) {

    var myCoverQuotesViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);

    self.Childs = ko.observableArray(ko.utils.arrayMap(data.Childs, function (c) {
        return new myCoverQuotesViewModel(c);
    }));

    self.selectedChild = ko.observable();
    self.showChildren = ko.computed(function () {
        return self.selectedChild()
        && self.selectedChild().Childs().length > 0;
    });



var mapping = {
    'CoverQuotes': {
        create: function (options) {
            return new myCoverQuotesViewModel(options.data);
        }
    }
}

ko.mapping.fromJS(result, mapping, viewModel);

};

viewModel看起来像这样:

The viewModel would look something like this:

var viewModel = {

     CoverQuotes: [{id: 1, label:'test', Childs:[{id: 2, label:'child1'}]]
};

因此，总的来说，我有一个CoverQuotes数组，每个元素还包含一个CoverQuotes数组(依此类推).

So in a nutshell, I have an array of CoverQuotes, which each element also contains an array of CoverQuotes (and so on).

此映射存在的问题是Childs可观察数组.呼叫时:

The problem I have with this mapping, is with the Childs observable array. When calling:

 return new myCoverQuotesViewModel(options.data); 

对于主要对象，它工作正常.但是，当从arrayMap函数内部调用构造函数时，则该行:

for the main object, it works fine. However when calling the constructor from within th arrayMap function, then that line:

 ko.mapping.fromJS(data, {}, self);

什么也没做.

结果，为嵌套子项分配了selectedChild和showChildren属性，但它们缺少所有其他属性(例如本示例中的id和label).

As a result, nested children are assigned the properties selectedChild and showChildren but they are missing all others (like id and label in this example).

我遗漏了什么，因此映射也适用于儿童?

What am I missing so the mapping also works for children ?

推荐答案

我已经使用递归自定义映射解决了我的问题

I've solved my problem using a recursive custom mapping

viewModel.getQuotesSuccess = function (result) {
    var myCoverQuotesViewModel = function (data) {
        var self = this;

        var mappingChildren = {
            'Childs': {
                create: function (options) {
                    return new myCoverQuotesViewModel(options.data);
                }
            }
        }

        ko.mapping.fromJS(data, mappingChildren, self);


        self.selectedChild = ko.observable();
        self.showChildren = ko.computed(function () {
            return self.selectedChild() && self.selectedChild().Childs().length > 0;
        });

        self.IsVisible = ko.computed({
            read: function () {
                var visible = true;
                if (self.DependsOn().length > 0) {
                    $.each(self.DependsOn(), function (index, value) {
                        var dependency = viewModel.QuoteSelectedViewModel().CoverQuotes.filterByProperty("Code", value);
                        if (dependency().length > 0) {
                            visible = visible & dependency()[0].IsSelected();
                        } else {
                            visible = false;
                        }
                    });
                }

                return visible;
            },
            deferEvaluation: true
        }, this);
    }

    var mapping = {
        'CoverQuotes': {
            create: function (options) {
                return new myCoverQuotesViewModel(options.data);
            }
        }
    }

    ko.mapping.fromJS(result, mapping, viewModel);
};

这篇关于敲除递归映射问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！