knockoutjs - ko not found - html

Question

This is my knockoutjs code:
$(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());
});
and this is my html5 page:
...
<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>
...
the last part in my kojs file: ko.applyBindings(new QuizViewModel()); has an error: Uncaught ReferenceError: ko is not defined. Can someone help me with this ?

Answer 1

I moved this to a jsfiddle here http://jsfiddle.net/johnpapa/V7Hrt/
Note that I have seen odd errors like this when my javascript references were in the "wrong" order. You may want to move your Knockout reference after your jQuery reference (if you use that) and also make sure you custom script files that refer to Knockout are loaded after KO.