javascript-在KnockoutJS中嵌套foreach的3个级别

我在淘汰赛中要管理3个数据级别,但是添加新数据时只有前两个正在更新.第三级未更新.

到目前为止,这是我的代码：
http://jsfiddle.net/26medias/Zy8Wr/

有测验,每个测验包含问题,其中包含答案.
我可以添加测验,可以添加问题,但是答案没有更新.

我在网上和在stackoverflow上找到的所有示例仅适用于2级数据.

如何使第三级为可观察的[]按钮？

谢谢！

解决方法:

对于希望绑定到的每个嵌套级别,都需要将每个级别映射到一个可观察的对象.

您最多只映射了一个可观察的问题数组.但是,您也应该在问题中映射每个答案.

scope.quizzes = ko.observableArray(
    ko.utils.arrayMap(quizzes, function(quiz) {
        return {
            name:      quiz.name,
            questions: ko.observableArray(quiz.questions) // not far enough
        };
    })
);

由于您似乎希望能够编辑测验的名称以及问答文本,因此也应该使这些属性可观察.

scope.quizzes = ko.observableArray(
    ko.utils.arrayMap(quizzes, function(quiz) {
        return {
            name:      ko.observable(quiz.name),
            questions: ko.observableArray(
                ko.utils.arrayMap(quiz.questions, function (question) {
                    return {
                        text:    ko.observable(question.text),
                        answers: ko.observableArray(
                            ko.utils.arrayMap(question.answers, function (answer) {
                                return {
                                    text:  ko.observable(answer.text),
                                    valid: ko.observable(answer.valid)
                                };
                            })
                        )
                    };
                })
            )
        };
    })
);

这似乎很多,但这是您必须能够绑定到这些对象的步骤.您可以使用mapping plugin简化此过程,它将为您完成此映射.

scope.quizzes = ko.mapping.fromJS(quizzes);

标签：knockout-js,javascript,nested-loops
来源： https://codeday.me/bug/20191031/1978542.html