ノックアウトでmvc - 簡単な例が動作しない

Question

MVCで前に動作するようにノックアウトしましたが、残念ながらコードを失ってしまいました。

MVCプロジェクトの〜/ wwwsource /フォルダにhtmlページを置くだけで、簡単なノックアウトの例をデモしたいと思います。

は（最終的に、私は実際に右可能であれば、レイザーと一緒にノックアウトを使用してが、最初私は、少なくとも行く簡単な作業例を取得し、そこから延長したいと思い、MVCのビュー内のノックアウトを使用したい。

は私がJSFiddleではなく、Visual Studioで働いている、次のことを試してみました：

 <script src="lib/knockout/dist/knockout.debug.js" type="text/javascript"> 

    // Here's my data model 
    var ViewModel = function (first, last) { 
     this.firstName = ko.observable(first); 
     this.lastName = ko.observable(last); 

     this.fullName = ko.pureComputed(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")); 
</script> 



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

Answer 1

ko.applyBindingsisは部分的にしかロードされたとしてHTMLを呼ばれたときに、HTMLが完全ので、レンダリングされた前に、JavaScriptを呼び出している

。

最も簡単な解決策は、jQuery（ノックアウトを使用しているため存在するはずです）を使用して、ドキュメントが読み込まれたコールバックにJavaScriptをラップすることです。

無効なスクリプトタグ構文もあります。ページの新しいスクリプトタグを開始する前に、ノックアウトスクリプトタグを閉じる必要があります。

<script src="lib/knockout/dist/knockout.debug.js" type="text/javascript"> 
</script> 

<script type="text/javascript"> 
// Here's my data model 
var ViewModel = function (first, last) { 
    this.firstName = ko.observable(first); 
    this.lastName = ko.observable(last); 

    this.fullName = ko.pureComputed(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); 
}; 

$(document).ready(function(){ 
    ko.applyBindings(new ViewModel("Planet", "Earth")); 
}) 
</script> 

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