为什么在Knockout JS中不能观察到observableArray？

Question

我是编程新手（尤其是JS语言，尤其是KO语言），我想提出一个交互式测验，供高中学生在课堂上使用。 多亏了这篇文章 （提供了操作方法和代码，我以此为基础，试图将其重新适应我的需求）和这里的一些好人的帮助，现在我想到了以下内容：

http://jsfiddle.net/sNJm3/2/

一切都很好，因为这是可行的。 但是...：p我现在想添加一个observableArray，每次用户单击该按钮时，我都会push（）所有selectedAnswer，以便最后我可以将selectedAnswers（）。length与questions（）。length进行比较并且，如果它们相同，我将使（尚未包含在代码中）可见。

我像这样在QuizViewModel构造函数中声明了我的数组（因为它涉及整个测验，所以我认为应该在这里进行）：

var selectedAnswers = ko.observableArray();

然后，我每次都需要将来自Question构造函数的selectedAnswer属性推入其中。 这就是问题所在……这是我脚本的一部分：

//Construction
$.each(quizName.controls, function(index, question) {
    quiz.questions.push(new Question(index + 1, question));
    quiz.selectedAnswers().push(question.selectedAnswer);
});

这确实填充了一个名为selectedAnswers（）的数组，但它仅填充有Undefineds，即使我单击一个答案（未定义不被单击的selectedAnswer ...代替）并且selectedAnswers（）。length已经相等，它也不会变化。到总问题数，这意味着我要进行的比较将无法进行...

一定有一些基本的KO逻辑我不在这里（或者是JS逻辑，这似乎确实使我难以理解！）对此事的任何想法将不胜感激！

Answer 1

对您的“选定答案”列表使用一个计算得出的值。

function Question(config) {
    this.text = text;
    this.questionText = config.questionText;
    this.answers = config.answers;
    this.selectedAnswer = ko.observable();
}

function QuizViewModel(quizName) {
    this.questions = ko.observableArray(
        ko.utils.arrayMap(quizName.controls, function (control) {
            return new Question(control);
        })
    );
    this.selectedAnswers = ko.computed(function () {
        return ko.utils.arrayMap(this.questions(), function (q) {
            return q.selectedAnswer();
        }
    });
}

如果答案已经是问题本身的属性，则无需维护单独的答案堆栈（即可观察的数组）。