Knockout.js - シンプルな "Hello World"が失敗する

私はノックアウトjs（http://goo.gl/lddLl）の非常に単純なこんにちはの世界をやっています：しかし、私のコードは私が理解していないエラーを生成しています。 knockout-から2439Knockout.js - シンプルな "Hello World"が失敗する

：

キャッチされない例外TypeError：ヌルノックアウト-3.0.0.debug.jsのプロパティを読み取ることができません 'のnodeType'

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>AJAX Example</title> 
    <script src="../Scripts/jquery-2.0.3.js"></script> 
    <script src="../Scripts/knockout-3.0.0.debug.js"></script> 

    <script> 

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

ko.applyBindingsコールでエラーが発生します3.0.0.debug.jsコード：

// Perf optimisation: Apply bindings only if... 
// (1) We need to store the binding context on this node (because it may differ from the DOM parent node's binding context) 
//  Note that we can't store binding contexts on non-elements (e.g., text nodes), as IE doesn't allow expando properties for those 
// (2) It might have bindings (e.g., it has a data-bind attribute, or it's a marker for a containerless template) 
var isElement = (nodeVerified.nodeType === 1);

私は私が間違ってやっているかを知るにはあまりにも無知だ...

出典

2013-11-26 TheFastCat

それを解決する2つの方法は私が推測する。

1最も簡単な方法：ページがロードされるまで初期化を遅らせるためにjQueryの準備（）関数を使用

$(document).ready(function() { 
    your script goes here 
});

内のスクリプトをラップします。

2の下でスクリプトを動かす：

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

HTMLを上から下へ解析されます。 html要素の前にスクリプトを置くと、一部またはすべてのページ要素が対話する準備が整う前にスクリプトを実行できます。

出典

2013-11-26 19:11:23

/恥じ：そうのように下部にスクリプトを置きます。あなたの教えに感謝します！ – TheFastCat

心配はありません。嬉しいことに役立ちます！ –

本体がDOMに追加される前にスクリプトが実行されています。本文はバインディングのデフォルトルートノードです。

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>AJAX Example</title> 
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script> 
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.debug.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> 

<script> 

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

出典

2013-11-26 19:12:29 Matt

私に教えていただきありがとうございます！ – TheFastCat

Knockout.js - シンプルな "Hello World"が失敗する

答えて

関連する問題