javascript - KnockoutJS 中的 3 级嵌套 foreach

Question

我在 Knockout 中有 3 个级别的数据要管理，但在添加新数据时只有前两个级别会更新。第三级没有更新。

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

有测验，每个都包含问题，其中包含答案。我可以添加测验，我可以添加问题，但答案不会更新。

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

我怎样才能将第 3 级作为 Observable 以使 [+] 按钮起作用？

谢谢！

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

Answer 2

您的答案数组只是一个数组，而不是 observableArray。您需要将您的数组定义为 ko.observableArray。请注意，下面的代码片段对所有 3 级数组都使用了 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
                    }
                ])
            },