knockoutjs - 做一个测验

Question

knockoutjs文件：

$(function() { 
    $('#info').hide(); 
    QuizViewModel(); 
    ko.applyBindings(new QuizViewModel()); 

    $('#restart').click(function() { 
     location.reload(); 
    }); 
    }); 


    function QuizViewModel() { 
     var self = this; 

     self.previous = ko.observableArray([]); 
     self.questions = ko.observableArray([]); 
     self.current = ko.observable(); 
     self.number = ko.observable(0); 
     self.previousNumbers = ko.observableArray([]); 
     self.selectedAnswers = ko.observableArray(); 
     self.correctAnswers = ko.observableArray([]); 

     self.loadQuestions = function() { 
      $('#questionsAndAnswers').fadeOut('fast'); 
      $.getJSON('./json/quiz.json', function (data) { 
       $.each(data, function (i, q) { 
        self.questions.push(q); 
        if (q.answers.tf == "true") { 
         self.correctAnswers.push(q.answers.question); 
        } 
        else { 
        // 
        } 

       }); 
      }); 
      $('#questions').fadeIn('fast'); 

     } 
     self.getQuestion = function (number) { 
      $.getJSON('./json/quiz.json', function (data) { 
       $.each(data, function (i, q) { 
        if (number == i) { 
         self.current(q); 
        } 
       }); 
      }); 
     } 

     self.nextQuestion = function (selectedAnswer) { 
      if (self.previousNumbers().length == 15) { 
       $('#questionsAndAnswers').fadeIn('fast'); 
       $('#questions').fadeOut('fast'); 
      } else { 

       var random = Math.floor(Math.random() * 15) 

       if (self.previousNumbers.indexOf(random) == -1) { 
        if (self.previousNumbers().length > 0) { 
         self.current().selectedAnswers = self.selectedAnswers(); 
         //alert(self.current().selectedAnswers[0] + " " + self.current().selectedAnswers[1]); 
         if ($.inArray(self.current().selectedAnswers[0], this.correctAnswers) > -1) { 
          $('#infoCorrect').show(); 
         } 
         self.previous.push(self.current()); 
         self.selectedAnswers.removeAll(); 
        } 
        self.previousNumbers.push(random); 
        self.getQuestion(random); 
        var previousNumber = self.number(); 
        self.number(previousNumber + 1); 

       } else { 
        self.nextQuestion(); 
       } 


      } 

     } 

     $('#questionsAndAnswers').fadeOut('fast'); 

     self.nextQuestion(); 

    } 

我的JSON文件的第一部分：TF = true或false（只是为了给它一个名称）

[ 
    {"id" : 1, 
    "question": "Welke stad is de hoofdstad van Brazili\u00eb?", 
    "answers" : [{"answer":"Rio de Janeiro", "tf":"false"}, 
      {"answer":"Brasilia", "tf":"true"}, 
      {"answer":"Sa\u00F5 Paulo", "tf":"false"}], 
    "info" : "De hoofdstad van Brazili\u00eb is Brasilia en niet Rio de Janeiro of Sa\u00F5  Paulo zoals de meesten denken. Tot 1960 was Rio de Janeiro inderdaad de hoofdstad, maar  vanaf dan nam de nieuwe stad Brasilia deze functie over. Niettemin zijn Rio de Janeiro en  Sa\u00F5 Paulo zeer belangrijke steden voor het land met respectievelijk 11 en 6 miljoen  inwoners." 
    }, ... 

HTML5页面：

<div id ="questions" data-bind="with: current"> 

     <h1 id="title">Quiz rond het thema: Brazili&euml; - Sisal</h1> 
        <p class="question" data-bind="text: question"></p> 
        <div class="answers" data-bind="foreach: answers"> 
         <p data-bind="with: $data"> 
          <input id="checkboxes"type="checkbox" data-bind="checked: $root.selectedAnswers, value: answer"/> 
          <span class="answer" data-bind="text: answer"></span> 
         </p> 
        </div> 
        <p id="info" class = "answers" data-bind="text: info"></p> 
        <img id="img1" class="buttons" src="img/next.png" title="Volgende vraag" data-bind="click: $root.nextQuestion"/> 
       </div> 
</section> 
       <div id ="questionsAndAnswers"> 
        <div> 
         <div data-bind="foreach: previous"> 
          <p class="question" data-bind="text: question"></p> 
          <div data-bind="foreach: selectedAnswers"> 
           <span data-bind="text: $data"></span> 
          </div> 
          <div data-bind="foreach: answers"> 
           <p data-bind="with: $data"> 
            <input type="checkbox" data-bind="value: answer, checked: tf=='true'" disabled="true"/> 
            <span class="answer" data-bind="text: answer"> </span><span data-bind="checked: $parent.selectedAnswers"></span> 
    </p> 
    </div> 
    <div> 

          </div> 
         </div> 
        </div> 
        <img id="restart" class="buttons" src="img/start.png" title="Herstart de quiz" /> 
       </div> 

有人能告诉我如何在json文件中检查正确答案的选定答案。然后显示id =“info”的p标签？

我使用数组现在来检查这个（correctAnswers）

Answer 1

我简化你的代码为我的需求。下面是一个工作示例http://jsfiddle.net/gurkavcu/wJhqB/

总结：

// In every getQuestion function empty correctAnswers array 
self.correctAnswers.remove(function(item){return true;}); 
// Create correct answer array for current question 
$.each(q.answers , function(j,a) {      
     if (a.tf == "true") { 
       self.correctAnswers.push(a.answer);     
      } 
      else {     
      } 
}); 

我用敲除映射插件来显示结果和模拟AJAX事件：

<p id="info" class = "answers" data-bind="text:ko.mapping.toJS($root.correctAnswers)"></p> 

映射插件文档：http://knockoutjs.com/documentation/plugins-mapping.html
映射插件来源： https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js