2012-01-09 22 views
2

這是我的knockoutjs代碼:knockoutjs - KO沒有找到

$(function() { 
function QuizViewModel() { 
    var self = this; 

    self.previousQuestions = ko.observableArray([]); 
    self.questions = ko.observableArray([]); 
    self.thisQuestion = ko.observable(); 
    self.questionNumber = ko.observable(0); 
    self.arrPreviousNumbers = ko.observableArray([]); 
    self.selectedAnswers = ko.observableArray(); 

    self.loadQuestions = function() { 
     $('#allQuestions').fadeOut('fast'); 

     $.getJSON('./json/quiz.json', function (data) { 

      $.each(data, function (i, q) { 

       self.questions.push(q); 

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

    } 
    self.getQuestion = function (number) { 

     $.getJSON('./json/quiz.json', function (data) { 

      $.each(data, function (i, q) { 
       if (number == i) { 
        self.thisQuestion(q); 
       } 
      }); 
     }); 
    } 
    self.nextQuestion = function() { 

     if (self.arrPreviousNumbers().length == 15) { 
      $('#allQuestions').fadeIn('fast'); 
      $('#questions').fadeOut('fast'); 
     } else { 

      var randomnumber = Math.floor(Math.random() * 15) 
      if (self.arrPreviousNumbers.indexOf(randomnumber) == -1) { 
       if (self.arrPreviousNumbers().length > 0) { 
        self.thisQuestion().selectedAnswers = self.selectedAnswers(); 
        alert(self.thisQuestion().selectedAnswers[0]); 
        self.previousQuestions.push(self.thisQuestion()); 
        self.selectedAnswers.removeAll(); 
       } 
       self.arrPreviousNumbers.push(randomnumber); 
       self.getQuestion(randomnumber); 
       var previousNumber = self.questionNumber(); 
       self.questionNumber(previousNumber + 1); 

      } else { 
       self.nextQuestion(); 
      } 
     } 

    } 

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

    self.nextQuestion(); 

} 


ko.applyBindings(new QuizViewModel()); 

}); 

,這是我的HTML5網頁:

... 
<div id ="questions" data-bind="with: thisQuestion"> 
       <h2>Question</h2> 
       <p data-bind="text: question"></p> 
       <div class="answers"data-bind="foreach: answers"> 
        <p data-bind="with: $data"> 
         <input type="radio" data-bind="checked: $root.selectedAnswers, value: title"/> 
         <span data-bind="text: title"></span> 
        </p> 
       </div> 
       <p data-bind="text: info"></p> 
       <button data-bind="click: $root.nextQuestion"> 
        blabla 
       </button> 
      </div> 
      <div id ="allQuestions"> 
       <h2>Correction</h2> 
       <div class ="answers"> 
        <div data-bind="foreach: previousQuestions"> 
         <p 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="radio" data-bind="value: title, checked: status=='true'" disabled="true"/> 
           <span data-bind="text: title"> </span><span data-bind="checked: $parent.selectedAnswers"></span><!--<span data-bind="text: $parent.selectedAnswers"> </span>--> 
          </p> 
         </div> 
        </div> 
       </div> 
      </div> 

<script type='text/javascript' src='js/libs/knockout-2.0.0.js'></script> 
<script defer src="js/plugins.js"></script> 
<script src="js/quiz.js"></script> 
... 

在我kojs文件的最後部分:ko.applyBindings(新QuizViewModel( ));有一個錯誤:Uncaught ReferenceError:ko未定義。有人可以幫我弄這個嗎 ?

+0

而路徑js/libs/knockout-2.0.0.js是正確的嗎?它在Firebug/Fiddler/IE debug/...中顯示爲200嗎? – sisve 2012-01-09 16:51:21

+0

是的,這是正確的。 – Sllix 2012-01-09 16:52:53

回答

2

我搬到這來這裏的jsfiddle http://jsfiddle.net/johnpapa/V7Hrt/

請注意,我已經看到了這樣奇怪的錯誤,當我的JavaScript引用是在「錯誤」的命令。你可能想在你的jQuery引用之後移動你的Knockout引用(如果你使用的話),並且確保你引用Knockout的自定義腳本文件在KO之後被加載。

+1

這也不是問題.. – Sllix 2012-01-09 20:22:18

+1

它現在正在工作..我的json文件有一個小問題..文本中有一個單引號,我不知道.. – Sllix 2012-01-10 21:53:38