2017-02-21 12 views
1

knockout.jsチュートリアルmy visualstudio asp.netプロジェクトからいくつかのコードを変換しようとしています。基本的なノックアウトの例「データバインド」が機能しない

私はすべてがうまくセットアップされていると思う、私はノックアウトライブラリの依存関係を追加するためにバウアーを使用した。

ノックアウトを使用するコードを取得したいと考えています。ここで私が持っているものです。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
</head> 
<body> 

     <p>First name: <strong data-bind="text: firstName"></strong></p> 
     <p>Last name: <strong data-bind="text: lastName"></strong></p> 
    <script src="lib/knockout/dist/knockout.js" type="text/javascript"> 
      function AppViewModel() { 
       this.firstName = "Devin"; 
       this.lastName = "Salemi"; 
      } 
      // Activates knockout.js 
      ko.applyBindings(new AppViewModel()); 
    </script> 
</body> 
</html> 

私がサイトに行くとき、私が見るすべては 最初の名前です:

姓:

だから、実際の値にもかかわらず、表示されません私はJSでそれらを設定しました。それは読んでください - まず名前を:デヴィン

最終名前:私はKOを書くときIDEでSalemiの

は、かなり確信してすべての機能は、例えば、うまくにリンクされています。 IDEは私にすべてのオプションを与えるので、私はライブラリがちょうど良いインストールされていると思う...

答えて

1

別の<script>タグでカスタムJavaScriptをラップする必要があります。

スクリプトタグにsrc=""があるたびに、内部コンテンツを無視してsrcファイルからロードします。したがって、あなたはすべてのカスタムスクリプトのsrc属性せずに別のスクリプトタグを必要とする:

<p>First name: <strong data-bind="text: firstName"></strong></p> 
 
<p>Last name: <strong data-bind="text: lastName"></strong></p> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"> 
 
</script> 
 
<script> 
 
    function AppViewModel() { 
 
    this.firstName = "Devin"; 
 
    this.lastName = "Salemi"; 
 
    } 
 
    // Activates knockout.js 
 
    ko.applyBindings(new AppViewModel()); 
 
</script>

+0

わかりました、今では何の問題も働きません、ありがとうございました。スクリプトを使用するhtmlコードの前にスクリプトを置くかどうかは重要ですか?ブラウザがこのようなものをコンパイルするためにどのようなプロセスを使用するのかわからない... –

+0

よく説明されている[** here **](http://stackoverflow.com/questions/436411/where-should-i-put-script- HTML-tags-in-html-markup) – Jag

関連する問題