knockoutjs - ko 未找到
这是我的knockoutjs代码:
$(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(new QuizViewModel());有错误:Uncaught ReferenceError:ko 未定义。有人可以帮我吗?
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 ?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我将其移至 jsfiddle http://jsfiddle.net/johnpapa/V7Hrt/
请注意,我当我的 javascript 引用处于“错误”顺序时,我见过这样的奇怪错误。您可能希望将 Knockout 引用移到 jQuery 引用之后(如果您使用它),并确保引用 Knockout 的自定义脚本文件在 KO 之后加载。
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.