简单页面未加载 KnockoutJS observables答案

【问题标题】：Simple page not loading KnockoutJS observables简单页面未加载 KnockoutJS observables
【发布时间】：2019-06-17 02:17:00
【问题描述】：

我很快就会从事一些使用 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>

页面应该加载显示“你好，地球”，但它只显示“你好，”。

【问题讨论】：

您在脚本末尾缺少 ) 以关闭您的 $(document).ready 调用。 jsfiddle.net/nym235L8
你是对的，但由于某种原因，它不起作用，我仍然看不到任何错误。也许js文件没有正确加载？有没有办法检查？
你需要让你的淘汰赛包含脚本和你的javascript作为两个不同的脚本标签<script type="text/javascript" src="/Scripts/knockout-3.4.2.js"></script><script type="text/javascript"> $(document).ready(....

标签： javascript html knockout.js observable

【解决方案1】：

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>

【讨论】：