使用KnockoutJS实现三层嵌套的foreach循环

Question

我需要在 Knockout 中管理 3 层数据，但是当添加新数据时只有前两层更新。第三层不更新。

这是我目前的代码： http://jsfiddle.net/26medias/Zy8Wr/ 有一些问题包含答案，它们都属于一个测验。 我可以添加测验和问题，但是答案没有被更新。

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

如何将第三层设置为可观察对象以使 [+] 按钮起作用？

谢谢！

- Julien L

---

由于Jeff Mercado的帮助，这是修正后的版本：http://jsfiddle.net/Zy8Wr/3/ - Julien L

Answer 1

对于您希望能够绑定到的每个嵌套级别，您需要将每个级别映射到一个可观察对象。

您仅映射了问题的可观察数组，但是您还应该将每个问题中的答案也映射出来。

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)
                                };
                            })
                        )
                    };
                })
            )
        };
    })
);

这可能看起来有些麻烦，但这是您必须做的才能绑定到这些对象。您可以使用映射插件使此过程更容易，并且它会为您完成此映射。

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

- Jeff Mercado

Answer 2

你的答案数组只是一个普通的数组，而不是一个可观察的数组。你需要将你的数组定义为ko.observableArray。请注意下面的代码片段使用observableArray来处理所有三个级别的数组。

var initialData = ko.observableArray([
    {
        name:    "Quiz #1",
        questions:    ko.observableArray([
            {
                text: "Question #1.1?",
                answers: ko.observableArray([
                    {
                        text:     "Yes",
                        valid:    true
                    },
                    {
                        text:     "No",
                        valid:    false
                    }
                ])
            },

- John Papa