Question

对此我不熟悉，我无法使用这个简单的淘汰应用程序。它应该显示

你好，行星地球！

我正在引用：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"));

这是我存储的地方：

Answer 1

由于app.js正在<head>部分加载，它将在body html存在之前加载，这意味着在调用applyBindings时没有任何东西可以用于knockout bind。

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

Knockout js app - 不工作

1 个答案: