在KnockoutJS中嵌套了3個級別的foreach

Question

我有5個級別的數據要在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。 請注意，代碼段bnelow使用observableArray forall 3級別的數組。

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
                    }
                ])
            },