3

Knockoutで管理するデータのレベルは3つありますが、新しいデータを追加するときに更新されるのは最初の2つだけです。第3レベルは更新されていません。

これまでの私のコードは次のとおりです：http： //jsfiddle.net/26medias/Zy8Wr/

クイズがあり、それぞれに質問が含まれ、回答が含まれています。クイズを追加したり、質問を追加したりできますが、回答が更新されていません。

オンラインおよびstackoverflowで見つけたすべての例は、2レベルのデータのみを対象としています。

[+]ボタンが機能するためのオブザーバブルとして第3レベルを設定するにはどうすればよいですか？

ありがとう！

4

2 に答える 2

3

バインドできるようにしたいネストのレベルごとに、各レベルをオブザーバブルにマップする必要があります。

観察可能な一連の質問にのみマッピングしました。ただし、質問の各回答もマッピングする必要があります。

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);
于 2012-10-06T18:59:44.187 に答える
1

回答の配列は単なる配列であり、observableArrayではありません。配列をko.observableArrayとして定義する必要があります。コードスニペットbnelowは、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
                    }
                ])
            },
于 2012-10-06T19:01:11.593 に答える