淘汰赛 js 应用程序 - 不工作答案

【问题标题】：Knockout js app - not working淘汰赛 js 应用程序 - 不工作
【发布时间】：2017-10-20 01:34:28
【问题描述】：

新手，我无法让这个简单的淘汰赛应用程序工作。它应该显示

你好，地球！

我引用的是：http://knockoutjs.com/examples/helloWorld.html

这是我运行 index.html 的时候：

是不是找不到knockout-3.4.2.js文件？

这是控制台。好像有错误。

这是 index.html 文件”：

<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Hello World</title>

    <!-- Import the Knockout file. -->
    <script type="text/javascript" src="C:\Dans\Work 2\Tech\Web Dev\Javascript and jQuery\Knockout.js\Examples\knockout-3.4.2.js"></script>

    <!-- Import the JavaScript file. -->
    <script type="text/javascript" src="app.js"></script>
</head>

<body>
  <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>

这是 viewmodel 文件 - app.js 文件”：

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};

ko.applyBindings(new ViewModel("Planet", "Earth"));

这是我存储它的地方：

【问题讨论】：

你能用 C:\.... 作为 src 吗？如果你使用像 cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js 这样的 CDN 会发生什么？
您的浏览器控制台有错误吗？ (ctrl-shift-i)
我尝试了 CDN..它并没有改变行为。
看起来有错误..我在上面包含了它。
尝试将 app.js 导入移动到新脚本块中的 html 正文下方。

标签： knockout.js

【解决方案1】：

由于 app.js 是在 <head> 部分中加载的，因此它将在 body html 存在之前加载，这意味着在调用 applyBindings 时没有任何用于敲除绑定的内容。

<head>
  <title>Hello World</title>

    <!-- Import the Knockout file. -->
    <script type="text/javascript" src="C:\Dans\Work 2\Tech\Web Dev\Javascript and jQuery\Knockout.js\Examples\knockout-3.4.2.js">

    <!-- Import the JavaScript file. -->
    <script type="text/javascript" src="app.js"></script>
</head>

您需要将导入行移到 html 正文下方，或将其包装在延迟执行块中，如 document.onload。

<head>
  <title>Hello World</title>

    <!-- Import the Knockout file. -->
    <script type="text/javascript" src="C:\Dans\Work 2\Tech\Web Dev\Javascript and jQuery\Knockout.js\Examples\knockout-3.4.2.js"></script>
</head>

<body>
  <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>

<script type="text/javascript">
    <!-- Import the JavaScript file. -->
    <script type="text/javascript" src="app.js"></script>
</script>

【讨论】：