Простая страница не загружает наблюдаемые KnockoutJS - PullRequest
Новая
       28

Простая страница не загружает наблюдаемые KnockoutJS

0 голосов
/ 23 января 2019

Я скоро поработаю над некоторыми проектами, использующими KnockOutJS, так что я немного его изучаю. Я создал простой проект, содержащий этот простой код (я нашел его на официальной странице), но он не работает.

Я буквально делаю копию вставки официального примера. 

<!DOCTYPE html>
<html>
<head>
    <title>KnockOut JS Test</title>
    <link href="/Content/bootstrap.css" rel="stylesheet"/>
    <link href="/Content/site.css" rel="stylesheet"/>
    <script src="/Scripts/modernizr-2.8.3.js"></script>
    <script src="/Scripts/jquery-3.3.1.js"></script>
    <script src="/Scripts/bootstrap.js"></script>
</head>
<body>
    <script type="text/javascript" src="/Scripts/knockout-3.4.2.js">
        $(document).ready(function () {
            // Here's my data model
            var ViewModel = function (first, last) {
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);

                this.fullName = ko.computed(function () {
                    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                    return this.firstName() + " " + this.lastName();
                }, this);
            };

            ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
        }
    </script>

    <div class='liveExample'>
        <p>First name: <input data-bind='value: firstName' /></p>
        <p>Last name: <input data-bind='value: lastName' /></p>
        <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
    </div>
</body>
</html>

На странице должно отображаться «Привет, планета Земля», но только «Привет».

1 Ответ

0 голосов
/ 23 января 2019

Ссылочные теги библиотеки JS и фактический тег сценария, в котором вы пишете свой код, должны отличаться. Оберните ваш код JS в <script></script>

<!DOCTYPE html>
<html>
<head>
    <title>KnockOut JS Test</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
        $(document).ready(function () {
            // Here's my data model
            var ViewModel = function (first, last) {
                this.firstName = ko.observable(first);
                this.lastName = ko.observable(last);

                this.fullName = ko.computed(function () {
                    // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                    return this.firstName() + " " + this.lastName();
                }, this);
            };

            ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work
        })
    </script>

    <div class='liveExample'>
        <p>First name: <input data-bind='value: firstName' /></p>
        <p>Last name: <input data-bind='value: lastName' /></p>
        <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>
    </div>

</body>
</html>
...