Nockoutjsへの初心者ガイド：パート1

キーテイクアウト

• knockoutjsは、リッチなデスクトップのようなWeb UIの作成を簡素化するJavaScriptライブラリです。データモデルをUIにリンクする簡単な双方向結合メカニズムを提供し、それらの間の同期を簡単にします。
ノックアウトは、モデルビュービューモデル（MVVM）設計パターンを使用し、アプリケーションを3つの部分に分割します。アプリケーションのデータを保持するモデル、モデルとビューの間のコネクタと通信層として機能するビュー、およびアプリケーション内のすべてのUI要素を指すことを見る。
knockoutjsは、宣言的バインディング、依存関係追跡、テンプレートの3つのコアコンセプトに基づいて構築されています。宣言的なバインディングは、UIの一部をデータモデルに接続します。依存関係追跡では、「観測可能性」と呼ばれるバインディングと特別な変数を使用して、変更時にモデルデータに関連付けられたすべての部品を更新します。テンプレートは、コードをシンプルに保ちながら、モデルデータの豊富な構造を表示するのに役立ちます。
• Observablesは、変更についてサブスクライバーに通知し、依存関係を自動的に検出できるNockoutJSで使用される特別なJavaScriptオブジェクトです。これにより、DOMを手動で操作することなく、モデルが変更されるたびにビューが自動的に更新できます。
• knockoutjsの初心者ガイド：基本と観察
Webテクノロジーを扱っているほとんどすべての人がJQueryを知っているか、少なくともそれについて聞いたことがあります。その比類のないシンプルさと簡潔さは、世界中の何百万人ものWeb開発者の生活をはるかに簡単にし、それは素晴らしいことです。

残念ながら、jQueryはすべての問題に対する解決策ではありません。より複雑なWebアプリを作成するとすぐに、問題が発生します。UIとデータが互いに動的に通信する簡単な方法はありません。低レベルのDOM操作とjQueryが提供するイベント処理により、これを達成するのはかなり困難です。 UIと基礎となるデータモデルの間のより洗練されたコミュニケーション方法を提供するライブラリが必要です。

そして、ここにノックアウトが登場します。ノックアウトは、リッチなデスクトップのようなWeb UIの作成に役立つJavaScriptライブラリです。ユーザーの相互作用を簡素化し、データソースの変更にインターフェイスを完全に応答します。ノックアウトは、データモデルをUIにリンクする簡単な双方向結合メカニズムを提供し、それらの間の同期を簡単にします。

jQueryと同時にノックアウトを使用する必要がありますが、場合によってはアニメーショントランジションのように、ノックアウト自体はそれに依存しません。あなたが理解する必要があるもう1つのことは、ノックアウトがjQueryと競争しないということです。彼らは両方とも素晴らしい仕事をしています。それぞれが独自の方向に。あなたがそれらを一緒に使用する必要がある最も多くの利点を取得したいかどうかを確認するように。このチュートリアルでは、ノックアウトのコアコンセプトと機能から始めます。パート2では、内蔵のバインディングとそれらの使用方法をより深く探索します。また、フィナーレでは、拡張されたオブザーバブルや独自のカスタムバインディングを作成する方法など、いくつかの高度な機能とテクニックを説明します。始めましょう！

基本的な概念

コードの例を使用する前に、最初にいくつかの基本的な概念を把握する必要があります。ノックアウトは、JavaScriptのモデルビュービューモデル（MVVM）設計パターンを実装しています。このパターンでは、アプリケーションは3つの部分に分割されます。

アプリケーションのデータを保持するモデル。これは、ユーザーが入力したデータまたはWebサーバーから取得されたJSONデータです。

モデルとビューの間のコネクタと通信層として機能するビュー。このデータを操作するためのデータと操作を保持し、UIに表示します。データモデルが変更されるたびに、これらの変更を反映してUIパーツの更新に対応します。アプリケーションの表示モデルは、JavaScriptコードで表されます。

アプリケーション内のすべてのUI要素を指すビュー。これは、与えられたUIの構造と外観の表現です。ビューは、データを表示し、ユーザーの入力を受け入れる責任があります。ビューは、アプリケーションのHTML/CSSコードで表されます

ノックアウト時には3つのコアコンセプトが構築されています。

1。宣言的なバインディング：これらを使用すると、UIの一部をシンプルで便利な方法でデータモデルに接続できます。 JavaScriptを直接使用してDOMを操作する場合、後でDOM階層または要素IDを変更した場合、これは壊れたコードを引き起こす可能性があります。 DOMを変更しても、宣言的なバインディングを使用すると、すべてのバインドされたピースが接続されたままです。任意のDOM要素にデータバインド属性を含めるだけで、データをDOMにバインドできます。

2。依存関係追跡：ありがたいことに、モデルデータが自動的に更新されるすべての部品を変更するたびに、観測可能性と呼ばれるバインディングと特別なタイプの変数に感謝します。イベントハンドラーとリスナーを追加することを心配する必要はありません。そのすべての追加作業は、根本的な値が変更されたときにリスナーに通知するノックアウトとオブザーバブルによって内部的に実行されます。

3。テンプレート：これは、アプリケーションがより複雑になり、ビューモデルデータの豊富な構造を表示する方法が必要な場合に役立ち、コードをシンプルに保ちます。ノックアウトには、すぐに使用できるネイティブのビルトインテンプレートエンジンがあります。ただし、必要に応じて、jquery.tmplやアンダースコアなどのサードパーティテンプレートエンジンも使用できます。

これらすべての理論があなたにあいまいに聞こえるかどうか心配しないでください。チュートリアルとコードの例を使用すると、すべてがより明確になります。

始めましょう

ノックアウトに飛び込む前に、HTMLドキュメントのライブラリをダウンロードして参照する必要があります。

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

プレゼンテーションからコードを分離することをお勧めします。すべてのアプリケーションコードを保持するJavaScriptファイルを作成する方が適切です。また、場合によってはjqueryを使用するため、参照する必要がある場合もあります。

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

これはベストプラクティスと見なされますが、トレーニングの目的と物事を簡単にするために、JavaScriptコードをヘッドタグに含めるか、マークアップを拡張することで同じドキュメントに入れることができます。

さあ、ビューモデルを作成するには、このようなJavaScriptオブジェクトを宣言するだけです。

データバインド属性（後述）はHTMLのネイティブではなく、ブラウザはそれが何を意味するのかわかりません。そのため、スクリプトの最後にKo.ApplyBindings（）関数を挿入することにより、ノックアウトを有効にするためにアクティブ化する必要があります。また、外部JavaScriptファイルを使用する場合、またはスクリプトがドキュメントのヘッドタグに配置されている場合、適切に動作するためにjQuery対応機能でノックアウトコードをラップする必要があります。開始する基本的なテンプレートは次のとおりです

  function viewModel() {

   // Your code here
  
  };

ko.applybindings（）メソッドを呼び出し、ビューモデルを渡すと、指定されたモデルをUIにバインドするようにノックアウトが指示されます。このビューモデルをUI全体の一部にバインドするだけで、DOM要素を提供することもできます。 Ko.ApplyBindings（）は2つのパラメーターを取ります。最初のパラメーターには、アクティブ化する宣言的バインディングで使用するモデルオブジェクトを表示する表示が表示されます。 2番目のパラメーターはオプションであり、データバインド属性を検索するドキュメントのどの部分を定義します。たとえば、ko.applybindings（viewmodel、document.getElementById（ 'container'））は、IDコンテナとその子孫を使用して、アクティベーションを要素に制限します。これは、複数のビューモデルを持ち、それぞれがページの異なる領域に関連付けたい場合に便利です。

それがどのように機能するか

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

ノックアウトを使用すると、データバインディングを実行するデータバインディングを指定するマークアップにデータバインド属性を含めることにより、データをDOM要素にバインドできます。コードにはDOM構造への参照がないため、バインディングを壊さずにHTMLを自由に変更できます。次の例では、このようなスパン要素にテキストデータバインド属性を追加します。

次に、テキストの価値を動的に更新する場合は、ビューモデルで観察可能なものとして宣言する必要があります。

これは「曜日は日曜日です。休息の時間です」

// syntax: data-bind="bindingName: bindingValue"
<p>The day of the week is <span data-bind="text: dayOfWeek"></span>. It's time for <span data-bind="text: activity"></span></p>

observables

ノックアウトは、ko.observable（）。

function viewModel() {
  this.dayOfWeek = ko.observable('Sunday');
  this.activity = ko.observable('rest');
};

ko.applyBindings(new viewModel()); 

観測可能性は関数として設定されます。そのため、次の方法で使用できます。

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

ノックアウトでは、観察可能なプロパティを使用する必要はありません。 DOM要素に1回値を受信したいが、ソースオブジェクトの値が変更されたときに更新されない場合、単純なオブジェクトで十分です。ただし、ソースオブジェクトとターゲットDOM要素を同期し続ける場合（双方向のバインディング）、観察可能なプロパティの使用を検討する必要があります。

場合によっては、2つ以上の観測可能性の値を1つの新しい値に組み合わせる必要がある場合があります。これは、いわゆる計算済みの観測可能性で実行できます。計算されたオブザーバブルは、1つ以上の他の観測可能性に依存する関数であり、これらの依存関係のいずれかが変更されるたびに自動的に更新されます。計算されたプロパティは、評価の変更に依存する観測可能性のいずれかが自動的に更新されます。次の例では、1日、月、年の観測可能性が変化するたびに、Fulldateという名前のコンピューター型の観察可能な名前が更新されます。

ko.computed（）は、これを2番目のパラメーターにします。それを渡さずに、this.day（）、this.month（）、またはthis.year（）を参照することはできませんでした。物事を簡素化するために、可変自己を作成できるため、2番目のパラメーターの追加を回避できます。これからは、このアプローチをコードの例で使用します。

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

1つのオブジェクトを処理する場合、変更は観察可能なものに変換することで簡単に追跡できます。しかし、複数のオブジェクトがある場合はどうなりますか？このような場合、ノックアウトにはko.observablearray（）と呼ばれる特別なオブジェクトがあり、物事のコレクションの変更を検出して応答できます。これにより、たとえば、アイテムが追加されて削除されたときにUIの繰り返しセクションを表示および消滅させる必要がある場合、複数の値を表示および/または編集することが可能になります。

これらのオブジェクトの状態ではなく、オブジェクトが配列内にあるオブジェクトを追跡できることを心に留めておく必要があります。オブジェクトを観測可能な配列に配置するだけで、そのオブジェクトのすべてのプロパティ自体が観測可能ではありません。これらのプロパティを観察できるようにしたい場合は、それは完全にあなた次第です。観測可能な配列は、オブジェクトを保持するオブジェクトを追跡し、オブジェクトが追加または削除されたときにリスナーに通知するだけです。

  function viewModel() {

   // Your code here
  
  };

観測可能な配列を作成すると、空にしたままにするか、初期値を入力できます。次の例では、曜日に入っている観測可能な配列を作成します。

ご覧のとおり、ノックアウトアレイを読み書きするには、任意のネイティブJavaScript関数を使用できます。しかし、ノックアウトには、構文がもう少し便利な独自の同等の機能があります：

$(document).ready(function(){
  
  function viewModel() {

   // Your code here
  
  };

  ko.applyBindings(new viewModel()); 

});

利用可能な関数の完全なリストについては、ドキュメントをチェックできます。

この投稿を読んで楽しんだなら、学習できるのが大好きです。マスターから新鮮なスキルとテクニックを学ぶ場所。メンバーは、Web用のJavaScriptプログラミングなど、SitePointのすべての電子ブックやインタラクティブなオンラインコースに即座にアクセスできます。 knockoutjs

に関するよくある質問（FAQ）

knockoutjsと他のjavascriptライブラリの違いは何ですか？

knockoutjsは、開発者がクリーンな基礎データモデルを使用してリッチでレスポンシブディスプレイとエディターのユーザーインターフェイスを作成するのに役立つJavaScriptライブラリです。他のJavaScriptライブラリとは異なり、KnockoutJSはモデルがデータを参照するモデル-View-ViewModel（MVVM）設計パターンを使用します。ビューはデータの視覚的表現であり、ViewModelはモデルとビューの間の中間です。このパターンにより、懸念の明確な分離が可能になり、コードの管理とテストが容易になります。 htmlファイルのknowoutjsライブラリ。公式NockoutJSのWebサイトからダウンロードするか、コンテンツ配信ネットワーク（CDN）から直接含めることができます。ライブラリを含めたら、knockoutjsの構文を使用して、viewmodelの作成を開始し、ビューにバインディングします。モデル（データ）とビュー（WebページのDOM要素）との接続を確立する方法。この接続により、データの変更がビューを自動的に更新できるようになります。その逆も同様です。 knockoutjsは、テキストやバリューバインディングなどの一般的なタスクにいくつかの組み込みバインディングを提供します。また、より複雑なシナリオのカスタムバインディングを作成することもできます。変更についてサブスクライバーに通知し、依存関係を自動的に検出できるJavaScriptオブジェクト。 KnockoutJSでは、Visebalsを使用して、モデルが変更されるたびに、DOMを手動で操作することなく、ビューを自動的に更新します。これにより、コードがクリーナーでメンテナンスが容易になります。

knockoutjsで計算された観測可能性を使用するにはどうすればよいですか？これらの依存関係のいずれかが変更されます。 KnockoutJSで計算された観測可能を作成するには、KO.computed関数を使用して、計算された値を返す関数を渡します。バインディングして、クリックやキープレスなどのユーザーアクションに応答できるようにします。 ViewModelでは、イベントを処理する関数を定義し、ビューでイベントバインディングを使用してイベントを機能に接続します。

knockoutjsにおけるviewmodelの役割は何ですか？

knokoutjsのviewmodelは、UIのデータと操作を表すJavaScriptオブジェクトです。ビューの状態を維持し、ユーザーアクションを処理し、必要に応じてモデルを更新する責任があります。 ViewModelはデータの直接表現ではなく、ビュー用の特殊なバージョンです。異なるデータでレンダリングできるマークアップのチャンク。タイプ「テキスト/HTML」のスクリプト要素を使用してテンプレートを定義し、テンプレートバインディングを使用してテンプレートをデータでレンダリングできます。 > Browserの開発者ツールを使用して、KnockoutJSアプリケーションをデバッグできます。 Ko.dataforおよびko.contextfor関数を使用して、DOM要素に結合したデータを検査できます。さらに、KnockoutjsはKo.tojson関数を提供します。これは、簡単な検査のためにViewModelをJSON文字列に変換するために使用できます。 jQueryやBootstrapなどの他のJavaScriptライブラリと一緒に使用できます。 KnockoutjsはDOMを直接操作するのではなく、ViewModelの変更に基づいてビューを更新するため、DOMを操作する他のライブラリと干渉しません。

以上がNockoutjsへの初心者ガイド：パート1の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。