knockout.js - 通过索引从 observableArray 中获取对象

Question

我正在用 Knockoutjs 设计一个测验。我想一次只显示一个问题。我在考虑一个全局计数变量，每次回答一个问题时都会加 1。但是我似乎无法找到一种方法来得到一个问题。
我将如何最好地解决这个问题？我是 Knockoutjs 的新手。我尝试了 questions()[number] 但这似乎不起作用。

谢谢

JS

$(document).ready(function(){
function Answer(data) {
    this.answer = ko.observable(data.answer);
    this.correct = ko.observable(data.correct);
}

function Question(data){
    this.id = ko.observable(data.id);
    this.question = ko.observable(data.question);
    this.answers = ko.observableArray([]);
    var mappedAnswers = $.map(data.answers, function(item) {return new Answer(item) });
    this.answers(mappedAnswers);
}


function AnswerViewModel(){
    // Data
    var self = this;

    self.questions =  ko.observableArray([]);

    self.checkAnswer = function(item, event){
            if (item.juist() == true){
               $(event.currentTarget).css("background", "green");

            }else{
                $(event.currentTarget).css("background", "red");
            }
    }

    $.getJSON("../res/json/quiz.json", function(allData) {
        var mappedQuestions = $.map(allData.questions, function(item) {return new Question(item) });
        self.questions(mappedQuestions);
    });
}

ko.applyBindings(AnswerViewModel());
});

HTML

<h3 data-bind="questions()[1].question"></h3>
<ul class="list-container"  data-bind="foreach: questions()[1].answers">
    <li class="list-item">
         <a class="list-item-content" href="#" data-bind="text: answer, click:checkAnswer"></a>
    </li>
</ul>
<button>Next question</button>

JSON

{
"questions" :
[
    {
        "id": 1,
        "question": "This is the first question",
        "answers" :
        [
            {"answer": "q1a1", "correct": false},
            {"answer": "q1a2", "correct": false} ,
            {"answer": "q1a3", "correct": true},
            {"answer": "q1a4", "correct": false}
        ]
    },
    {
        "id": 2,
       "question": "This is the 2nd question",
        "answers" :
        [
            {"answer": "q2a1", "correct": false},
            {"answer": "q2a2", "correct": false} ,
            {"answer": "q2a3", "correct": false},
            {"answer": "q2a4", "correct": true}
        ]
    }
]

}

Answer 1

Jsfiddle 很有趣，所以我不能在那里发布代码，但这很简单:你快到了!这里有一点插入。

首先，除非必要，否则调用标记中的方法并不是一个很好的做法，并且为函数提供参数可能意味着您可以为此使用 observable。在这种情况下:

<div data-bind="foreach: filteredQuestions">
<ul class="list-container"  data-bind="foreach: answers">
    <li class="list-item">
         <a class="list-item-content" href="#" data-bind="text: answer"></a>
    </li>

</ul>
<button data-bind="click: $parent.nextQuestion">Next question</button>
</div>

如您所见，在标记中我只是放置变量，而不是以 filteredQuestions 的形式调用它.现在你可能会问，“那个 foreach 是怎么回事？我只想显示一个问题，而不是所有问题。过滤后的东西是怎么回事？”

这就是我正在做的事情:我不是显示原始问题数组，而是显示一个过滤后的数组，每次它里面的任何可观察对象发生变化时都会更新。这是已过滤问题的代码。

self.currentQuestionId = ko.observable("1");
self.filteredQuestions = ko.computed(function() {
    var currentQuestion = self.currentQuestionId();
    return ko.utils.arrayFilter(self.question(), function(question) {
        return question.id() == currentQuestion;
    });
});

如果你注意代码，我只返回一个数组，只有一个问题，ID 与 currentQuestionId 设置的相同。多变的。这是一种方法，尽管有很多方法:另一种好的方法有一个名为 selectedQuestion 的 observable。第一个问题是哪个值；然后在标记中使用数据绑定(bind) with:selectedQuestion .但是让我们坚持这个，你能猜到 $parent.nextQuestion是什么吗？做？

self.nextQuestion = function() {
    var currentQuestionId = self.currentQuestionId();
    self.currentQuestionId(currentQuestionId + 1);
}

首先，我们使用 $parent关键字，以便浏览实际范围的父级，因为我们在子级 question因为 foreach陈述。由于您的要求，此功能有效，但可能存在一些陷阱(在最后一个问题中我们该怎么做？如果 id 的数值没有增加怎么办？)。那是另一种方法可能更有用的时候，在这种情况下，你会得到这样的东西:

self.nextQuestion = function(question) {
    var index = self.questions().indexOf(question);
    self.selectedQuestion(self.questions()[index + 1]);
}

最后一种方法的美妙之处？好吧，backQuestion 很简单!

self.backQuestion = function(question) {
    var index = self.questions().indexOf(question);
    self.selectedQuestion(self.questions()[index - 1]);
}

(您显然需要检查 IndexOutOfBounds 类型错误)。在最后一种方法中，不要忘记，因为我们在一个上下文切换元素中，比如 foreach ，我们接收当前问题作为参数。希望这可以帮助。