この記事は機械翻訳されたものです。

クライアントへの理解

HTML と JavaScript 用の Knockout の組み込みバインド (機械翻訳)

John Papa

コード サンプルをダウンロードします。

John Papaノックアウト、豊富なデータ バインディングの実装 HTML5 と JavaScript の開発をもたらします。 偏極量の概念を理解すると、開発ノックアウトを挿入する最も簡単な方法はそれを提供する組み込みのバインドの多様性を理解することです。 ノックアウトの組み込みバインドは、データ バインディング機能をタップし、HTML5 のあなたのアプリケーションの多くの側面に堅牢なデータ バインディングを追加する最も簡単な方法です。 前の列ノックアウトを導入、そのさまざまな種類の偏極量のカバーし、制御フローの組み込みバインドの検討します。 よ掘り下げて調査この時間にノックアウトの組み込みバインド。 ダウンロードすることができます、コード サンプル、 archive.msdn.microsoft.com/mag201203ClientInsight、さまざまな組み込みバインドを使用しての可能性がありますを使用するシナリオについて説明する方法を示します。

ノックアウト (現在 2.0.0) の最新バージョンをダウンロードすることができます bit.ly/scmtAi とあなたのプロジェクトでは、参照または NuGet パッケージ マネージャー Visual Studio の拡張機能を使用することができます (で bit.ly/dUeqlu) ノックアウトをダウンロードします。

ノックアウトの組み込みバインドとは何ですか?

その最も基本的なレベルでは、データ バインディング、バインディング ソース (、JavaScript オブジェクトなど) とバインドするターゲットが必要です (HTML 要素、たとえば)。 バインディング ソースは、頻繁に、ビュー モデルと呼ばれます。 ターゲット要素と同様に、バインドするターゲット プロパティを知ることが重要ですいくつかのプロパティがあります。 たとえば、ビュー モデル firstName プロパティ、input タグのテキストにバインドする場合は、ノックアウト値バインドにバインドするでしょう。 この例では、ノックアウト ターゲット プロパティは、組み込みバインドの 1 つを識別します。値。 ノックアウトの組み込みバインド ビュー モデルのメソッドと同様にプロパティにバインドすることができます。 この資料で説明するとおりノックアウトにはモデルのプロパティを表示する対象の要素にバインドする多くの組み込みバインドが含まれています。

組み込みのバインドを使用するための構文は、ノックアウト バインド名とデータ バインド プロパティの HTML 要素の内部のモデル プロパティのビューのペアを含めることです。 HTML 要素は、単に別の 1 つ以上のプロパティにデータを必要に応じてバインドをこの構文を使用して、コンマでバインドします。

data-bind="built-in-binding:viewmodel-property1, another-built-in-binding:viewmodel-property2"

このパターンに従う、ビュー モデル salePrice プロパティには、入力要素の値をバインドできませんでしたましょう。

<input type="text" data-bind="value:salePrice " />

ノックアウトの組み込みバインド バインド、ほとんどのシナリオを処理することができますがカバーされていない特殊なバインディング シナリオが発生した場合は、カスタム バインディング ノックアウトでは、あまりにも作成できます。 私は、今後の記事でカスタム バインドをカバーします。

基本的なバインド:テキストと html

みましょうノックアウトを提供、組み込みバインドを探索することでダイブします。 図 1 この資料の例でのすべての組み込みバインディングを使用するビュー モデルを示します。 サンプル データのギターのために、ですが、それだけバインドを実証することです。

図 1 ビュー モデル プロパティと、入れ子になった子供とメソッド

my.showroomViewModel = {
  id: ko.observable("123"),
  salePrice: ko.observable(1995),
  profit: ko.observable(-7250),
  rating: ko.observable(4),
  isInStock: ko.observable(true),
  model: {
          code: ko.observable("314ce"),
          name: ko.observable("Taylor 314 ce")
  },
  colors: ko.observableArray([
          { key: "BR", name: "brown" },
          { key: "BU", name: "blue" },
          { key: "BK", name: "black"}]),
  selectedColor: ko.observable(""),
  selectedColorsForDropdown: ko.observableArray([]),
  selectedColorForRadio: ko.observableArray(),
  allowEditing: ko.observable(true),
  isReadonly: ko.observable(true),
    onSalesFloor: ko.observable(true),
    qty: ko.observable(7),
  photoUrl: ko.observable("/images/314ce.png"),
  url: ko.observable("http://johnpapa.
net"),
  details: ko.observable("<strong><em>This guitar rocks!</em></strong>"),
  checkboxHasFocus: ko.observable(false),
  textboxHasFocus: ko.observable(false),
  buttonHasFocus: ko.observable(false),
  userInput: ko.observable(""),
  setFocusToCheckbox: function () {
          this.checkboxHasFocus(true);
  },
  displayValue: function () {
          if (this.userInput().length > 0) {
                  window.alert("You entered: " + this.userInput());
          }
  },
  detailsAreVisible: ko.observable(false),
  showDetails: function () {
          this.detailsAreVisible(true);
  },
  hideDetails: function () {
          this.detailsAreVisible(false);
  },
  useUniqueName: ko.observable(true)
};
ko.applyBindings(my.showroomViewModel);

おそらく、最も一般的なバインディング本文バインディングです。 テキスト バインド ノックアウトをみると、innerText プロパティを Internet Explorer、または同等のプロパティ他のブラウザーで設定します。 テキスト バインドの使用時は、前のテキストが上書きされます。 テキスト バインド スパンまたは事業部での値の表示によく使用されます。 この例は、ビュー モデルの model.code スパンにプロパティします。

<span data-bind="text: model.code"></span>

Html バインディングとして、よくはないが、ビュー モデルに HTML コンテンツをレンダリングするために便利です。 次の例では、html プロパティの内容が表示されます太字斜体本文します。

<tr>
  <td><div class="caption">html</div></td>
  <td><div data-bind="html: details"></div></td>
  <td><span>details: </span><span data-bind="text: details"></span></td>
</tr>

これらの例での結果を見ることができます図 2 (と 04-組み込み-bindings.html ページ、サンプル コードの実行のすべての例)。 すべての例には、組み込みのバインド、ターゲット ビュー モデルから元の値が表示されます。

The Knockout Text and HTML Bindings
図 2 ノックアウトのテキストと HTML のバインド

値のバインド

データ バインディングは、間違いなく最も役に立つので、意味、組み込みバインドのほとんどノックアウト ヘルプ バインドで、テキスト ボックス、チェック ボックスやドロップダウン リストなどの入力とフォームの要素には非常にインタラクティブなアプリケーションのためです。 ノックアウトの値バインドの汎用性を示すが、これらの組み込みバインドをみてみましょう。

HTML の多くの作品をバインド値、ビュー モデル プロパティ、テキスト ボックスのチェック ボックスやラジオ ボタンなど、HTML 入力要素の値に直接バインドの種類を入力します。 Textbox がバインドされている、ビュー モデルの model.code プロパティを次に示します。 プロパティは、ソース値が変更されたときに、ターゲットを通知にノックアウトの観察可能な関数を使用して定義されます。

<td><input type="text" data-bind="value: model.code"/></td>
<td><span>model.code: </span><span data-bind="text: model.code"></span></td>

Textbox の値を変更する場合は、新しい値 (テキスト ボックス) のターゲットからソース (ビュー モデル model.code プロパティ) に送信されるユーザー タブから textbox。 ただし、特別なノックアウト バインディングをすべてのキーストロークにターゲットを更新するにはノックアウトを話すにも使用できます。 次の例では、textbox の値が、ビュー モデルの salePrice プロパティにバインドされ、valueUpdate バインディング afterkeydown にバインドされます。 valueUpdate パラメーターを使用するときに、値のバインドを更新する必要がありますを定義できます、値のバインドです。 ここで、コード キーを押します (このサンプル、サンプル コードを実行して使用できますをすべて後、ソースを更新するにはノックアウトを語っています。 結果が表示されます図 3)。

<td><input type="text" data-bind="value: salePrice, valueUpdate: 'afterkeydown'"/></td>
<td><span>salePrice: </span><span data-bind="text: salePrice"></span></td>

The Value Binding to Textboxes
図 3 テキスト ボックスにバインド値

チェック ボックスとオプション ボタンをバインド

チェック ボックスは、ノックアウトにバインドされたデータ バインドを確認することができます。 チェックのバインド プロパティを true または false に評価される式にバインドする必要があります。 モデルのプロパティを表示する偏極量として定義されているため、ソース プロパティを変更すると、チェック ボックスが更新されます。 同様に、ユーザーがチェックまたはチェック ボックスをオフすると、値はビュー モデル プロパティで更新されます。 IsInStock プロパティにバインドされているチェック ボックスをオンを次に示します (ビュー モデルに図 1; 結果が表示されます図 4)。

<td><input type="checkbox" data-bind="checked: isInStock"/></td>
<td><span>isInStock: </span><span data-bind="text: isInStock"></span></td>

The Checked Binding
図 4 チェックのバインド

ラジオ ボタン、ラジオ ボタンのグループから選択するには、チェックのバインディングを使用することもできます。 次の例では、一連のラジオ ボタンの値を持つすべてのハードコードの色を表す 2 文字のコードには; ユーザーがラジオ ボタンの色を選択して、checked プロパティが設定されているビュー モデルの selectedColorForRadio プロパティは、2 文字の値に更新されます。

<td>
  <input type="radio" value="BR" data-bind=
    "checked:  selectedColorForRadio" /><span>brown</span>
  <input type="radio" value="BU" data-bind=
    "checked: selectedColorForRadio" /><span>blue</span>
  <input type="radio" value="BK" data-bind=
    "checked: selectedColorForRadio" /><span>black</span>
</td>
<td><span>selectedColorForRadio: </span><span data-bind=
  "text: selectedColorForRadio"></span></td>

これは完全にうまくそれより便利にデータ バインドするには、一連のラジオ ボタンは、3 つの組み込みのバインドを組み合わせることによって行うことができます色の一覧が。値のチェック、および foreach。 ビュー モデルに図 1 の各色の名前とキー値を含むオブジェクトの配列です色のプロパティがあります。 次の例では、foreach バインディング色配列プロパティを通じて、各ラジオ ボタンの値の色のキー プロパティとスパンのテキストの色の名前のプロパティにバインドするバインディングを設定ループします。

<td>
  <div data-bind="foreach: colors">
    <input type="radio" data-bind=
      "value:key, checked: $parent.selectedColorForRadio" />
       <span data-bind="text: name"></span>
  </div>
</td>
<td><span>selectedColorForRadio: </span>
  <span data-bind="text: selectedColorForRadio"></span></td>

ラジオボタンのチェック済みバインディングは、$親関数を使用して、ビュー モデルの selectedColorForRadio プロパティに設定されます。 ただし、foreach バインディング コンテキスト、ビュー モデルから、色のプロパティを変更するため、バインドはそのプロパティに直接単にバインドできません。 正しく、ビュー モデルのプロパティにバインドするには、コードを (この場合、ビュー モデル) では、コンテキストの親を参照する必要があります。 1 つのレベル チェック バインド ビュー モデルの selectedColorForRadio プロパティにはデータにバインドは、コンテキスト階層を参照してくださいにノックアウト ノックアウト $親関数に指示します。 (が多くの便利な機能とヒントこのような私は今後の記事を見ていきます。)この例の結果に表示されます図 5

The Checked and Value Bindings Used in Radio Buttons
図 5 チェック、ラジオ ボタンの値のバインドを使用

ドロップダウン リストをバインド

ドロップダウン リストに項目の一覧を読み込む、値を表示は異なるキー値を使用して、ユーザーの選択内容を保存するいくつかの重要なプロパティがあります。 ノックアウト、組み込みバインドを提供します。

バインド オプションは、通常、配列プロパティ ビュー モデルから表示する値のリストを識別します。 このセクションの例では、ビュー モデルの色プロパティにバインド オプションを設定します。 1 つの値のドロップダウン リストの表示が、ユーザーが項目を一覧から選択すると別の値を使用する場合します。 組み込みの optionsText と optionsValue のバインドのノックアウトを助けます。 OptionsText バインディング プロパティの文字列名にバインド オプションから、ドロップダウン リストの表示に設定されます。 OptionsValue バインディング プロパティの文字列名をドロップダウン リスト内の項目の選択した値にバインドする設定です。 この例では、オブジェクト名前、optionsText と、optionsValue のキーを使用する、キーのプロパティを名前とにはの色の配列が含まれています。 値バインド、ユーザーの選択を格納する、ビュー モデル selectedColor プロパティを設定します。

<td>
  <div class="caption">options, value, optionsText, optionsValue</div>
  <div>select (single selection dropdowns)</div>
</td>
<td><select data-bind="options: colors, value: selectedColor,
   optionsText: 'name', optionsValue: 'key'" ></select></td>
<td><span>selectedColor: </span><span data-bind="text: selectedColor"></span></td>

ドロップダウン リストから複数選択を許可する場合は、まず、HTML の select 要素の複数のプロパティを追加します。 [SelectedOptions (複数) バインディングをノックアウトの selectedOption (単数) バインディングを置き換えます。

<td>
  <div class="caption">options, selectedOptions, optionsText, optionsValue</div>
  <div>select (multiple selection dropdowns)</div>
</td>
<td><select data-bind="options: colors,selectedOptions: selectedColorsForDropdown,
  optionsText: 'name', optionsValue: 'key'" multiple="multiple" ></select></td>
<td><span>selectedColorsForDropDown: </span><span data-bind=
  "text: selectedColorsForDropdown"></span></td>

HTML を選択ため要素が複数の選択が可能ですへ selectedOptions の組み込みバインドが設定されている)、ビュー モデル selectedColorsForDropdown プロパティ (選択の値のコンマ区切りリストが含まれます。

図 6 、青と黒の両方の色を選択の結果を示しています。 ドロップ ダウン リスト (青と黒)、色の名前を表示が (BU と BK) のキーとして選択した値を使用しています。


図 6 にドロップダウン リストをバインド

有効にすると、入力要素の無効化

ノックアウトを有効にして、入力要素を無効にする組み込みのバインドを提供します。 バインドされているプロパティが true に評価され、false の場合、要素は無効になりますとを有効にするバインド入力要素有効になります。 無効にするバインドは正反対します。

<td>
  <input type="checkbox" data-bind="checked: allowEditing"/>
  <input type="text" data-bind="enable: allowEditing, value:salePrice" />
</td>
<td><span>allowEditing: </span><span data-bind="text: allowEditing"></span></td>

このサンプル コードは、チェック ボックスの値も、テキスト ボックスにバインドされている、ビュー モデル allowEditing プロパティにバインドされたデータを有効にするバインディングであることを示します。 そのとき、チェック ボックスをオン、テキスト ボックスが有効になっている; ときはオフ、テキスト ボックスが無効になります。

対照的に、次のサンプル、ビュー モデル isReadonly プロパティにバインディングがバインドされてどのようにチェック ボックスをオン、テキスト ボックスのバインドを無効にする、isReadonly プロパティに設定されます。 チェック ボックスをオンにすると、テキスト ボックスが無効になっているように (両方のサンプルの結果を見ることができます図 7)。

<td>
  <input type="checkbox" data-bind="checked: isReadonly"/>
  <input type="text" data-bind="disable: isReadonly, value:salePrice" />
</td>
<td><span>is readonly: </span><span data-bind="text: isReadonly"></span></td>

Bindings for Enabling and Disabling Elements
図 7 のバインドを有効にすると、要素の無効化

フォーカスをバインド

ノックアウト決定 hasfocus とセットの要素にフォーカスがあるという名前の組み込みバインドがあります。 Hasfocus バインディングは、フォーム上の特定の要素に設定するフォーカスをしたいときに便利です。 複数の要素が true に評価される値バインド hasfocus が、最近ほとんど設定は hasfocus が、要素にフォーカスが設定されます。 Hasfocus バインド キーワード直接要素にフォーカスを移動する場合は true に設定できます。 または、ビュー モデル プロパティをサンプル コードで示すようにバインドすることができます図 8

図 8 Hasfocus バインドを設定します。

<td>
  <input type="checkbox" data-bind="hasfocus: checkboxHasFocus"/>
  <input type="text" data-bind="hasfocus: textboxHasFocus"/>
  <button data-bind="click: setFocusToCheckbox, hasfocus:buttonHasFocus">
    set focus to checkbox</button>
  <br/>
  <span data-bind="visible: checkboxHasFocus">checkbox has focus</span>
  <span data-bind="visible: textboxHasFocus">textbox has focus</span>
  <span data-bind="visible: buttonHasFocus">button has focus</span>
</td>
<td>
  <span>checkboxHasFocus: </span><span data-bind="text: checkboxHasFocus">
    checkbox has focus</span>
  <br/>
  <span>textboxHasFocus: </span><span data-bind="text: textboxHasFocus">
    textbox has focus</span>
  <br/>
  <span>buttonHasFocus: </span><span data-bind="text: buttonHasFocus">
    button has focus</span>
</td>

このコード hasfocus のバインド チェック ボックス、テキスト ボックスとボタン要素を適切に 3 つの異なるビュー モデルのプロパティを設定します。 フォーカスがこれらの HTML 要素のいずれかに設定されている場合は、対応する hasfocus バインディングでは、ビュー モデル プロパティを設定する要素 (と他の人を false) の場合は true を。 この例では、ダウンロード可能なコードを試みるかで結果を参照してください図 9ユーザーがフォーカスをテキスト ボックスに配置しています。

Binding for Setting the Focus
図 9 にフォーカスを設定するためのバインド

可視性のバインド

ノックアウトの表示バインド true または false に評価されるプロパティにバインドする必要があります。 このバインディング要素の表示スタイル表示の場合に設定が true (真または null 以外の値) またはどれも false の場合は false、0、未定義 (null)。

チェック バインディングと両方、ビュー モデルの onSalesFloor プロパティを設定、テキスト ボックス表示バインドを次に示します。 チェック ボックスをオンにすると、onSalesFloor プロパティ true と、テキスト ボックスに設定されているが表示されます。 チェック ボックスがオフになっている、onSalesFloor プロパティを false に設定されて、テキスト ボックスが表示されない場合 (を参照してください図 10)。

<td>
  <input type="checkbox" data-bind="checked: onSalesFloor"/>
  <input type="text" data-bind="visible: onSalesFloor, value:qty" />
</td>
<td>
  <span>onSalesFloor: </span><span data-bind="text: onSalesFloor"></span>
</td>

Binding for Visibility
図 10 可視性のためのバインド

イベントのバインド

ノックアウト バインディング イベントをそのイベントの組み込みバインディングを通じてサポートしますが、クリックし、送信 2 特別な組み込みバインドのも。 クリック イベント メソッドはビュー モデルにバインドする場合クリックしてバインド要素に使用する必要があります。 入力ボタンでは、最もよく使われるまたは、要素が、任意の HTML 要素を使用することができます。

次のコードは、displayValue メソッドはビュー モデルにバインド] ボタンをクリックします; 図 1、displayValue メソッドはビュー モデルに単に (これは、テキスト ボックスにバインドされている)、ビュー モデル userInput プロパティに警告が表示されることを見ることができます。

<td>
  <input type="text" data-bind="value: userInput"/>
  <button data-bind="click: displayValue">display value</button>
</td>
<td>
  <span>userInput: </span><span data-bind="text: userInput"></span>
</td>

ビュー モデル メソッド以外のクリック イベントにバインドするには、ノックアウトのイベント バインディングを使用することができます。 ほとんど使用バインド イベントをクリックしてバインドであるため、単にイベント バインドへのショートカットです。

ノックアウトのイベント バインドを任意のイベントにバインドすることができます。 イベント バインディングを使用するには、イベント名のコンマで区切られた、ビュー モデル メソッド ペア オブジェクト リテラルを含む名値を渡します。 次のサンプル コード、mouseover と mouseout イベントは、showDetails と hideDetails メソッドをビュー モデルにバインドされているノックアウトの組み込みイベント バインディングを設定します。 これらのメソッド、ビュー モデル観測プロパティ detailsAreVisible true または false にに応じて設定します。

<td>
  <div data-bind="text:model.code, event: {mouseover: showDetails,
    mouseout: hideDetails}"></div>
  <div data-bind="visible: detailsAreVisible" style="background-color: yellow">
    <div data-bind="text:model.
name"></div>
    <div data-bind="text:salePrice"></div>
  </div>
</td>
<td>
  <span>detailsAreVisible: </span><span data-bind="text: detailsAreVisible"></span>
</td>

2 番目の div の表示のバインド設定しますモデルの詳細を表示するには­AreVisible プロパティは、マウスを最初の div 上に移動すると、2 番目の div が表示になります。 離れてからは、最初の div、マウスを動かすと、2 番目の div が表示されなくなります。 結果が表示されます図 11。 送信結合 (に示されていない Figure11) 任意の入力の HTML フォームを送信するジェスチャーを受け入れます。

The Click and Event Bindings
図 11 クリックしてイベント バインド

スタイルのバインド

スタイルは、css とスタイルの組み込みのバインドを使用して抜きをバインドできます。 Css のバインドは、いずれかに設定することができます。 またはより有効な css クラスの名前。 次の例は、textbox その値がビュー モデルの利益プロパティとオブジェクトにリテラル セットをバインド、css に設定をバインドであることを示しています。 リテラルのオブジェクトが 1 つまたは複数の css クラスの名前を適用するには、true または false を評価する必要があります、対応する式。

<td>
  <input data-bind="value:profit, css: {negative: profit() < 0,
    positive: !(profit() < 0), }"/>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ?
'negative' : 'positive'"></span>
</td>

たとえば、利益プロパティが未満 0 に評価される場合は、css クラスの名前付き否定が適用されます。 同様に、2 番目の式が評価され、true の場合は、css クラスの名前付き正が適用されます。

時 css クラス可能な限りの使用をお勧めしますが、同様には、特定のスタイルを設定する可能性があります。 ノックアウトこれそのスタイルの組み込みバインディングをサポートしています。 利益が 0 より大きい場合、利益未満 0 と緑が次の例では、textbox の色赤に変更 (css とスタイルの両方のバインドの結果が表示されます図 12)。

<td>
  <input data-bind="value:profit, style: {color: profit() < 0 ? '
red' :
    'green'}"></input>
</td>
<td>
  <span>profit < 0: </span><span data-bind="text: profit() < 0 ? '
red' :
    'green'"></span>
</td>

Style Bindings
図 12 スタイル バインド

他の HTML 属性のバインド

ノックアウト多くの組み込みバインドは、確かには何も存在しないいくつかの状況が発生します。 これらは、ノックアウトが使えるは、データをビューのモデル プロパティに属性をバインドできます、attr の組み込みバインドには提供しています。 これは href とタイトルの結合など、多くの一般的なシナリオで非常に便利ですが、要素。

<td>
  <a data-bind="attr: {href: url, title: model.
name}, text:model.code"></a>
</td>
<td><span>url: </span><span data-bind="text: url"></span></td>

属性バインドの別の一般的な用途、img 要素をビュー モデルの photoUrl プロパティには、src 属性をバインドすることです (これらのサンプルの結果を見ることができます図 13)。

<td>
  <img data-bind="attr: {src: photoUrl, alt: model.code}" class="photoThumbnail"/>
</td>
<td><span>photoUrl: </span><span data-bind="text: photoUrl"></span></td>

Binding to Element Attributes
図 13 の要素の属性のバインド

まとめ

この記事は多くのノックアウトを提供、組み込みバインドの探検。 いくつかの他の人が私は、今後の記事でカバーされますテンプレート バインディング特に。 いずれの場合では、概念は同じです。 ターゲット要素とそれをバインドするビュー モデルのメンバーに使用するバインディングのプロパティを確認します。 ノックアウトの偏極量とそのさまざまな組み込みバインドを理解できたら、モデル ビュー ViewModel、または MVVM、パターンを使用して堅牢な Web アプリケーションを作成するには、基本の構成要素があります。

John Papa 、Microsoft の元のエバンジェ リスト、Silverlight と Windows の 8 チームが、彼は人気の Silverlight のテレビ番組のホストです。 彼は世界の基調講演とビルド、ミックス、プロフェッショナル開発者会議、Tech· などの会議のセッションで発表しています。エド、Visual Studio のライブ ! DevConnections。パパも Visual Studio Magazine (パパの視点) の著者である Pluralsight のトレーニング ビデオのコラムニストであります。彼は Twitter の上に従う twitter.com/john_papa

この記事のレビュー、技術スタッフに感謝:Steve Sanderson