ノックアウトJSを開始するには

Question

現在、ASP.NETを使用して開発中です。Knockout JSを使いたいと思います。基本的には、最初に提供されたコードをコピーして貼り付けたものですチュートリアル。

だから、私はheadにこれを置く：

<script type="text/javascript"> 
    function() { 
     // This is a simple *viewmodel* - JavaScript that defines the data and 
     behavior of your UI 

     function AppViewModel() { 
      this.firstName = ko.observable("Bert"); 
      this.lastName = ko.observable("Bertington"); 

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

     this.capitalizeLastName = function() { 
      var currentVal = this.lastName();  // Read the current value 
      this.lastName(currentVal.toUpperCase()); // Write back a modified value 
     }; 
    } 

    // Activates knockout.js 
    ko.applyBindings(new AppViewModel()); 
    }(); 
</script> 

...

私 bodyで

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script> 

と一緒に、私はコードがすべてのノックアウトから取られた

<!-- This is a *view* - HTML markup that defines the appearance of your UI --> 
<p> 
    First name: <strong data-bind="text: firstName"></strong> 
</p> 
<p> 
    Last name: <strong data-bind="text: lastName"></strong> 
</p> 
<p> 
    First name: 
    <input data-bind="value: firstName" /></p> 
<p> 
    Last name: 
    <input data-bind="value: lastName" /></p> 
<p> 
    Full name: <strong data-bind="text: fullName"></strong> 
</p> 
<button data-bind="click: capitalizeLastName"> 
    Go caps</button> 

を置いJSのチュートリアルですが、どういうわけか、値は自動的にバインドされません。それは私にとってはうまくいかない。私はここに何かを逃していますか

Answer 1

あなたはjQueryのを使用したくなかった場合、あなたはまた、可能性：

2. あなたの外側の自己実行中の関数を削除するには、本体の下部にあるスクリプト参照ノックアウトビューモデルを置きます

Answer 2

DOM（あなたのHTML）がレンダリングされる前にJavaScriptコードが実行されているようです。頭に含まれているJavaScript関数はすぐに実行されます。このコードは、ページが完全にレンダリングされたときにのみ実行されるようにする必要があります。

これはjQuery ready機能で実行できます。

<script type="text/javascript"> 
    $(document).ready(function() { 
    // your existing JavaScript goes here. 
    }) 
</script> 

Answer 3

あなたは誤って匿名関数ラッパーを使用しているようです。

コードにmore（）を追加する必要があります。

(function() { 
... 
})(); 

の作業例：http://jsfiddle.net/AlfeG/bZatD/