KnockoutJS-環境設定

KnockoutJSの使用は非常に簡単です。 HTMLページで<script>タグを使用してJavaScriptファイルを参照するだけです。

Knockout.jsは次の方法でアクセスできます-

Knockout.jsの製品ビルドは、http：//knockoutjs.com/downloads/[公式Webサイト]からダウンロードできます。 +次の画像のようなページが表示されます。ダウンロードリンクをクリックすると、最新のknockout.jsファイルが取得されます。

次のコードに示すように、ファイルを参照します。

<script type = 'text/javascript' src = 'knockout-3.3.0.js'></script>

src属性を更新して、ダウンロードしたファイルが保存されている場所に一致させます。

あなたはCDNからKnockoutJSライブラリを参照することができます-

次のようにコードでhttps://www.asp.net/ajax/cdn[Microsoft Ajax CDN]からKnockoutJSライブラリを参照できます-

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
   type = "text/javascript"></script>

または、次のようにhttps://cdnjs.com/[CDNJS]からKnockoutJSライブラリの縮小版を参照できます-

<script src = "https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"
   type = "text/javascript"></script>

注-このチュートリアルのすべての章で、KnockoutJSライブラリのCDNバージョンを参照しています。

例

KnockoutJSは、Model-View-ViewModel（MVVM）パターンに基づいています。このパターンについては、章のリンク：/knockoutjs/knockoutjs_mvvm_framework [KnockoutJS-MVVM Framework]で詳しく調べます。まず、KnockoutJSの簡単な例を見てみましょう。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Simple Example</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
         type = "text/javascript"></script>
   </head>

   <body>
      <!-- This is called "view" of HTML markup that defines the appearance of UI -->

      <p>First String: <input data-bind = "value: firstString"/></p>
      <p>Second String: <input data-bind = "value: secondString"/></p>

      <p>First String: <strong data-bind = "text: firstString">Hi</strong></p>
      <p>Second String: <strong data-bind = "text: secondString">There</strong></p>

      <p>Derived String: <strong data-bind = "text: thirdString"></strong></p>

      <script>
         <!-- This is called "viewmodel". This javascript section defines the data and
            behavior of UI -->

         function AppViewModel() {
            this.firstString = ko.observable("Enter First String");
            this.secondString = ko.observable("Enter Second String");

            this.thirdString = ko.computed(function() {
               return this.firstString() + " " + this.secondString();
            }, this);
         }

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

   </body>
</html>

次の行はKnockoutJSライブラリを参照しています。

<script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"
   type = "text/javascript"> </script>

この行はKnockoutJSライブラリを参照しています。

2つの入力ボックスがあります：最初の文字列*と 2番目の文字列*。これらの2つの変数は、ViewModelでそれぞれEnter StringとEnter Second Stringの値で初期化されます。

<p>First String: < input data-bind = "value: firstString"/> &lt/p>

これは、bodyセクションで 'data-bind' 属性を使用してViewModelからHTML要素に値をバインドする方法です。

ここで、「firstString」はViewModel変数を指します。

this.firstString = ko.observable("Enter First String");

*ko.observable* は、基になるViewModelデータを更新できるように、値の変更を監視する概念です。

これをよりよく理解するために、最初の入力ボックスを「Hello」に、2番目の入力ボックスを「finddevguides」に更新してみましょう。値が同時に更新されるのがわかります。この概念については、リンク：/knockoutjs/knockoutjs_observables [KnockoutJS-Observables]の章で詳しく説明します。

this.thirdString = ko.computed(function() {
   return this.firstString() + " " + this.secondString();
}, this);

次に、viewmodelで関数を計算しました。この関数は、前述の2つの文字列に基づいて3番目の文字列を導出します。したがって、これらの文字列に対して行われた更新は、この派生文字列に自動的に反映されます。これを達成するために追加のコードを記述する必要はありません。これはほんの簡単な例です。この概念については、link：/knockoutjs/knockoutjs_computed_observables [KnockoutJS-Computed Observables]の章で説明します。

出力

上記のコードを my_first_knockoutjs_programl として保存します。ブラウザでこのファイルを開くと、次のような出力が表示されます。

最初の例

文字列を「Hello」と「finddevguides」に変更すると、出力が次のように変更されます。

Hello finddevguidesの例

Knockoutjs-environment-setup

KnockoutJS-環境設定

例

出力