2016-08-10 5 views
0

私はノックアウトを使用して、ユーザーが入力したファーストネームとラストネームを一緒に結合しようとしています。この例に基づいています:http://knockoutjs.com/examples/helloWorld.htmlノックアウト:ファーストネーム - ラストネームジョイナーが動作しない

私はノックアウトのための感触を得るために少し機能を変更しようとしました。コードは良く見えましたが、出力は変わりませんでした。私はその後、チュートリアルの正確なコードが私にとってはうまくいくかどうかをテストしましたが、そうではありません。私は本当に明白な何かが欠けていると確信しています。誰かがそれが何であるか教えてもらえますか?

これは私のHTMLです:

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<!--view--> 
<head> 
    <meta charset="utf-8" /> 
    <title>Testing Knockout</title> 
    <script src="knockoutTester.js"></script> 
    <script src="knockout-3.4.0.js"></script> 

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


</body>            
</html> 

これは私のJSです:

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

    this.fullName = ko.pureComputed(function() { 
     return this.firstName() + " " + this.lastName(); 
    }, this); 
};  
ko.applyBindings(new ViewModel("Planet", "Earth")); 

おかげ

+0

knockoutTester.jsは何を提出されましたか? JSコードはこのファイルに保存されていますか? – dotnetom

+0

@dotnetomはい、私のJSコードはknockoutTester.jsファイルに保存されています –

答えて

3

あなたのJSコードで結構です。あなたが最初のノックアウトをロードし、その後にのみ、カスタムコードをロードする必要が動作するようにあなたのコードためには

<script src="knockoutTester.js"></script> 
<script src="knockout-3.4.0.js"></script> 

:問題は、あなたのHTMLファイルにJSファイルを追加した順序です。したがって、上記の行を

<script src="knockout-3.4.0.js"></script> 
<script src="knockoutTester.js"></script> 

に変更する必要があります。

また、スクリプトの実行時にすべてのDOM要素をロードする必要があるため、カスタムJavaScriptコードがDOMの読み込み後にのみ実行されるようにする必要があります。 jQueryのメソッド$(document).readyを使用するか、または他の代替方法を使用できます(たとえば、$(document).ready equivalent without jQueryに記載されているように)。

(上記のDOMがロードされた後、それだけで負荷)別の方法としては、本体の下部にライン<script src="knockoutTester.js"></script>を含めることができ

+0

私は2つを切り替えましたが、それでも動作しませんでした。おかげさまで、あなたは本当に重要な何かをキャッチしました。これは難しいことです。 –

+0

@TheWorldSoul DOMがロードされた後、またはカスタムスクリプトを 'body'要素の最後にロードした後でスクリプトを実行しようとしましたか?私は詳細で答えを更新しました。 – dotnetom

+0

体の一番下にknockoutTester.fileのsrcを追加しました。しかし、それはまだ動作しません。 javascriptファイルのトップでノックアウトを開始する必要がありますか?私は不完全な感じです。 –

関連する問題