以前のKnockoutJS Learningシリーズ（i）の最初の経験記事では、KOのデータバインド= "xx：oo"バインディング方法は、テキスト、値などに結合するだけでなく、可視、スタイル、その他の外観属性、クリック、テキスト、その他のイベント、さらには制御プログラムの流れさえバインドすることが言及されました。さまざまな派手なバンドルは間違いなくあなたのファンタジーを満足させます。
以下は、主にバインドされたプロパティによる表現、プロセス、および相互作用の3つのタイプに分かれているさまざまなバインディングの使用について簡単に説明します。
パフォーマンス属性
プレゼンテーションクラスの拘束力のある属性には、可視、テキスト、HTML、CSS、スタイル、および属性が含まれます。 CSSがCSSを表すクラスを除いて、他のすべては理解しやすいです。もちろん、スタイルの命名はJSと一致する必要があり、以下に示すように、削除する必要があります。
<！ - html code-> <div data-bind = "visible：shuldshowmessage">「shuldshowmessage」が真の値を保持している場合にのみこのメッセージが表示されます。</div> <div>今日のメッセージは次のとおりです。 ProfitWarning：currentProfit（）<0} "> CSSクラスバインディングテスト</div> <div data-bind =" style：currentProfit（）<0？ {shuldshowmessage：ko.observable（true）、// message visiblemmessage：ko.observable（）、//初期blankdetails：ko.obserntprofit：//初期blankcurrentprofit：ko.observable（150000）、 ko.observable（150000）、//正の値、したがって最初はblackurl：ko.observable（ "year-end.html"）、urltitle：ko.observable（ "最終年末統計を含むレポート"）}; ko.applybindings（viewmodel）; //バインドを適用します効果は次のようです：
前の記事で述べたように、XXOOの個々の属性に加えて、JSONオブジェクトを渡すこともできます。つまり、次のような拘束力のある属性を組み合わせることもできます。
<！ - html code-> <div data-bind = "{visible：shuldshowmessage、text：mymessage、css：{restwarning：culernprofit（）<0}}">「shuldshowmessage」が真の値を保持している場合にのみこのメッセージが表示されます。</div>もちろん、効果は次のようなものです：
プレゼンテーションクラスの設定は比較的簡単です。注意すべきことの1つは、多くのプレゼンテーションクラスを動的に変更する必要がないことです。現時点では、ViewModel設定を使用して、データの集中初期化を実現できますが、次のような観測可能性に設定しないでください。
// js codevar viewmodel = {shuldshowmessage：ko.observable（true）、//メッセージ最初にvisiblemymessage： 'このテキストは動的更新を必要としません」//最初はブランク};プロセスクラスの属性
プロセスクラスには、foreach、ifnot、with、およびより高度な「コンポーネント」バインディングが含まれます。 ifnotが表示されない場合。違いは、DOMから対応するコンポーネントを直接削除する場合、表示されている場合は、表示された表示のみを制御し、コンポーネントはまだDOMにあります。 JSと同じ効果があり、スコープチェーンを拡張することです。簡単に言えば、「プレフィックス」を追加することです。変数の前。ここでは、foreachのみを導入し、コンポーネントはテンプレートバインディングと一緒に配置されます。
コードをチェックしてください：
<！ - htmlコード - > <p>テストforeach binding </p> <ul data-bind = "foreach：people"> <li> <span data-bind = "text：$ index"> </span>人の名前：<span data-bind = "text：name"> </span </span <a href = "＃"＃ "dicaple <pareple"> removeple "> href = "＃" data-bind = "click：削除">削除</a> </li> </ul> <入力型= "button" data-bind = "click：addpeople" value = "add"/> var listmodel = function（）{//人の配列の値を設定します（実際には人は関数配列です）。 Arrayオブジェクトを横断するためにEachを使用してください// ul、liは人々と人々の子供に対応しています。したがって、内部的にLiを結合する場合、スコープは人の子供にあります{名前...}。外部の人々の外の人を呼び出すために、$親が必要です//内部で削除と呼ばれる場合、これは現在のLIアイテムに対応する{name ...}であり、スコープは現在のドメインであり、$親は必要ありません。 this.people = ko.observablearray（[{name： "mark zake"、remaid：function（）{that.people.remove（this）; //現在のオブジェクト（つまり{name ...}）とスコープに注意してください。HTMLタグを心配しないでください。 {that.people.remove（this）;}}、{name： "green deny"、remove：function（）{that.people.remove（this）;}}]）; // adpeopleは、同じレベルの人々のメソッドを内部的に呼び出します。これは変更され、これは事前に保存されて渡される必要があります。var that = this; this.addpeople = function（）{that.people.push（{name：new date（）。todatestring（）、remove：function（）{that.people.remove（this）;}};実行したいのは、listmodel.people.remove（a.parent）this.removepeople = function（）{that.people.remove（this）;}}; ko.applybindings（new listmodel（））;ここで混乱しやすいのは、DOMノードとViewModelの間の階層的対応です。まず、ULを拘束するために適用します。つまり、各LIは各人の子供に対応します。これに対応した後、JSのスコープルールに従って理解できます。範囲といえば、これについて言及する必要があります。ことわざにあるように、私はこれを私の最初の愛であるかのように扱い、これは何千回も私をだましました。ここで、Xiaojiaは公式バージョンに削除関数を追加しました。これは、公式のremovepeopleに対応するのが簡単です。 $ indexや$ parentなどの変数については、文字通り理解してください。
相互作用クラスの属性
最後に、ポイントを得る時が来ました。 KOを使用する最も重要な理由は、動的なインタラクティブUIプレゼンテーションの問題に対処することです。ここでは、フォームに関連するいくつかのバインディングを紹介します。
（1）[バインディング]をクリックします
構文：data-bind = "click：clickhandler"。ここでのクリックハンドラー機能は、参照できる限り、必ずしもViewModelの関数ではありません。クリックイベントについて注意すべきことがいくつかあります。
1.パラメーターパス、KOは、デフォルトでClickHandler関数の最初のパラメーターとして現在のコンポーネントを渡します。ここの現在のバインディングコンテキストに注意してください。たとえば、With環境では、返されたコンポーネントは、必要な現在のコンポーネントの代わりにコンポーネントになります。イベントパラメーターを渡す必要がある場合は、イベントを2番目のパラメーターとして渡します。より多くのパラメーターを渡す必要がある場合は、関数でラップする必要があります。のように：
<ボタンdata-bind = "click：function（data、event）{myfunction（ 'param1'、 'param2'、data、event）}">私をクリック</button>2。デフォルトの動作の設定（リンクなど）
KOはデフォルトでイベントの動作により禁止されており、通常、リンクのクリックイベントをバインドしますが、それらをジャンプさせません。ただし、有効にする必要がある場合は、ClickHandlerでtrueを返してください。
3。バブル
KOはデフォルトでバブルを許可されています。 data-bind = "clickhandler、clickbubble：false"でクリックイベントをバブルに設定できます。
（2）イベントバインディング
KOは、ユーザーがバインディングイベントをカスタマイズするためにこのインターフェイスを提供します。パラメーターの合格、デフォルトの動作、バブルなどについては、クリックバインディング、ユースケースと同じです。
<div> <div data-bind = "event：{mouseover：eanabledetails、mouseout：disableatetails}"> me over me </div> <div data-bind = "visible：nubetaindenabled"> div> <script type = "text/javascript"> var viewmodel = {eanableabable：ko.observable（false（false）distoredableabable（false）、 {this.detailsenabled（true）;}、disableteTails：function（）{the.detailsenabled（false）;}}; ko.applybindings（viewmodel）; </script>（3）バインディングを提出します
主に検証フォームの作業を行うために使用されます。 KOはデフォルトの提出フォームアクションをブロックし、送信バウンド関数に転送します。将来提出する必要がある場合は、バインディングイベントでtrueを返してください。
PS：フォームのクリックイベントを使用して処理してみませんか？送信はもともと提出イベントを処理するように設計されているため、キャリッジリターンなどの提出アクションを受け入れることもできますが、クリックできません。
（4）値はTextInputに拘束されます
入力ボックスのバインディング値とテキストインプットは似ていますが、テキストインプットは入力イベントを処理するために特別に使用される新しいものであるため、TextInputイベントをバインディングに使用することをお勧めします。前の記事でわかるように、値バインディング（左）入力を使用する場合、更新する前に焦点を入力ボックスから移動する必要がありますが、TextInput（右）はすぐに更新されます。
値バインディングは、data-bind = "{value、valueupdate： 'afterkeydown'}を設定することにより、TextInputと同じ効果を達成することもできますが、これはブラウザのTextInputと互換性がありません。
（5）オプションバインディング（SelectedOptions）
ドロップダウンリストでは、オプションを使用して子供の値をバインドできます。子供は文字列またはJSオブジェクトのいずれかにすることができます。前の記事（[Knockoutjs Learning Experience Journey]（1）KOの最初の経験）は文字列を示しています。今回はオブジェクトを渡します。
コード：
<p>あなたの国：<select data-bind = "options：availablecountries、optionstext： 'countryname'、value：selectedcountry、optionScaption： 'chood ...'"> </select> </p> <div div div div div div div div div div div div div div div div div div div div div div div div div "> <！ selectedCountry（）。country -population： 'nown' ""> </span>国（ "UK"、65000000）、新しい国（ "USA"、320000000）、新しい国（ "スウェーデン"、29000000）]、selectedcountry：ko.observable（）//デフォルトで選択されていない}; ko.applybindings（viewmodel）;
リストボックスオプションをバインドするオプションは次のとおりです。選択したアイテムをバインドするために値を使用します。オプションはJSオブジェクトであるため、OptionTextを使用してリストボックスに表示を指定する必要があります。 OptionCaptionは、アイテムが選択されていない場合のデフォルトの表示値を指します。マルチセレクトリストボックスを設定した場合、選択したアイテムをバインドするために値を使用することはできません。現時点では、選択したアイテムをバインドするためにselectoptionsを使用する必要があります。
（6）その他のバインディング：有効化/無効、ハスフォーカス、チェック、ユニークネーム。
これらのイベントは非常に簡単に使用できるため、詳細に紹介しません。最後のUniquenameは、フォームコントロールの一意の名前属性を設定するために使用されます。フォームがバックグラウンドに送信されると、名前属性の値を設定せずにバックグラウンドに提出されないため、そのような拘束力のある関数があります。公式ウェブサイトには、Hasfoucusには別の比較的一般的な影響があります。
名前：
名前：バートベルティントン
名前をクリックして編集します。他の場所をクリックして変更を適用します。
上の名前をクリックすると、編集可能になり、フォーカスを失い、普通のテキストになります。この効果は、KOで実装するのが非常に簡単です。
要約します
この記事では、主にknockoutjsのさまざまなバインディングの使用方法を紹介します。これらの結合方法の組み合わせを使用すると、より動的な相互作用が必要なUIページを作成するだけです。これらの方法を使用する最も重要なことは、すべてのバインディングが関数オブジェクトであることを覚えておくことであるため、HTMLで直接動作できるため、JSコード構造がより簡単になることがあります。
公式チュートリアル：http：//knockoutjs.com/documentation/introduction.html