knockoutjs - ko 未找到

发布于 2024-12-25 15:28:52 字数 4315 浏览 1 评论 0原文

这是我的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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

沒落の蓅哖 2025-01-01 15:28:53

我将其移至 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文