7

我正在用 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}
        ]
    }
]

}

4

2 回答 2

9

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第一个问题是哪个值；然后在标记中使用数据绑定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，我们将当前问题作为参数接收。希望这可以帮助。

于 2013-01-05T18:41:09.777 回答
1

这是一个有效的解决方案。

该代码使用映射插件来简化视图模型的创建。
"questionIndex" 和 "currentQuestion" observables 跟踪当前问题。

function AnswerViewModel(){
  var self = this;
  ko.mapping.fromJS(data, {}, self);

  this.questionIndex = ko.observable(0);
  this.currentQuestion = ko.computed(function(){
     return self.questions()[self.questionIndex()];
  });

this.nextQuestion = function(){
  var questionIndex = self.questionIndex();
  if(self.questions().length - 1 > questionIndex){
    self.questionIndex(questionIndex + 1);
  }
};

this.prevQuestion = function(){
  var questionIndex = self.questionIndex();
  if(questionIndex > 0){
    self.questionIndex(questionIndex - 1);
  }
};

this.checkAnswer = function(item, event){
  $(event.currentTarget).css("background", item.correct() ? "green" : "red");
};  
}

标记：

<!-- ko with: currentQuestion -->
<h3 data-bind="text: question"></h3>
<ul class="list-container" data-bind="foreach: answers">
  <li class="list-item">
     <a class="list-item-content" href="#" data-bind="text: answer, click:$root.checkAnswer"></a>
</li>
</ul>
<!-- /ko -->

在这里，我使用虚拟元素<!-- ko --> <!-- /ko -->来引入所需的上下文。

于 2013-01-05T20:39:43.860 回答