knockoutjs - 找不到ko

时间:2012-01-09 16:49:38

标签: html5 knockout.js

这是我的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());有错误:未捕获的ReferenceError:未定义ko。有人可以帮我弄这个吗 ?

1 个答案:

答案 0 :(得分:2)

我把它移到这里的jsfiddle http://jsfiddle.net/johnpapa/V7Hrt/

请注意,当我的javascript引用处于“错误”顺序时,我看到了类似的奇怪错误。您可能希望在jQuery引用之后移动Knockout引用(如果使用它),并确保在KO之后加载引用Knockout的自定义脚本文件。