2017-10-19 6 views
0

これに新しいと私はこの単純なノックアウトアプリを動作させることはできません。表示する必要がありますノックアウトjsアプリ - 動作していません

こんにちは、惑星地球!

私が参照しています:私はindex.htmlをを実行したときにここでhttp://knockoutjs.com/examples/helloWorld.html

は次のとおりです。

enter image description here

はそれがノックアウト-3.4.2.jsファイルを見つけることはありませんか?

ここにコンソールがあります。エラーがあるように見えます。

enter image description here

ここでは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")); 

はここです保存した:

app.js以来

enter image description here

+1

srcにはC:\ ....を使用できますか? https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.jsのようなCDNを使用するとどうなりますか? – ggdx

+1

ブラウザのコンソールにエラーがありますか? (ctrl-shift-i) –

+0

私はCDNを試しました。それは振る舞いを変えませんでした。 – user3020047

答えて

1

が呼び出された時のapplyBindingsでのノックアウトバインドのためのものがないことを意味し、本体のHTMLが存在する前に、それがロードされます<head>セクションにロードされています。

<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> 
関連する問題