KnockoutJs でのバインディングの仕組み

このコンテンツは基本的にオリジナル資料の翻訳です。目的は、Magento 2 の KnockoutJs について学び、KnockoutJs に関するポルトガル語のコンテンツを作成することです。

ドキュメント

• データバインド構文
• バインディングコンテキスト

バインディング

KnockoutJs では、バインディング は、ViewModel のロジック (データおよびビジネス ロジック) を View (HTML) に接続する方法です。つまり、バインディングを通じて、DOM を直接操作することなく、ユーザー インターフェイスがデータの変更を自動的に反映します。

KnockoutJ のバインディングは、HTML 要素の data-bind 属性を通じて機能します。この属性では、使用するバインディングと関連する値を指定します。

data-bind 属性は、完全に許容されますが、HTML にネイティブではありません (HTML 5 と厳密に互換性があり、HTML 4 では問題が発生しません。ただし、ブラウザーはデフォルトではこの属性を認識しないため、ノックアウトを有効にして有効にします。

バインディング構文

KnockoutJs の宣言型バインディング システムは、データを UI にバインドするための簡潔かつ強力な方法を提供します。通常、単純なデータ プロパティにバインドするか、単一バインディングを使用するのが簡単かつ明白です。より複雑なバインディングの場合、KnockoutJs バインディング システムの動作と構文をより深く理解するのに役立ちます。

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'">
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone">

呼び出しは、コロンで区切られた呼び出しの名前と値の 2 つの項目で構成されます。要素には複数のリンク (関連または無関係) を含めることができ、各リンクはカンマで区切られます。現在のバインディングで使用されているデータは、オブジェクトによって参照できます。このオブジェクトは バインディング コンテキスト (バインディング コンテキスト) と呼ばれます。

バインディング値は、単一の値、変数、リテラル、またはほぼすべての有効な JavaScript 式にすることができます。

リンクには任意の量の空白 (スペース、タブ、改行) を含めることができるため、それらを使用してリンクを自由に整理できます。

リンクには JavaScript スタイルのコメント (//... および /*...*/) を含めることができます。例:

値を指定せずにバインディングが指定された場合、KnockoutJs はバインディングに未定義の値を与えます。

コンテキスト階層は、KnockoutJS によって自動的に作成および管理されます。以下は、KO によって提供されるさまざまなタイプのバインディング コンテキストのリストです。

Variável de Contexto	Descrição
$root	Esta propriedade sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente esse é o objeto passado para ko.applyBindings.
$data	Esta propriedade é muito parecida com a palavra-chave this do Javascript. A propriedade $data em um contexto de ligação refere-se ao objeto ViewModel para o contexto atual.
$index	Esta propriedade contém o índice de um item atual de um array dentro de um loop foreach. O valor de $index mudará automaticamente conforme e quando a matriz Observable subjacente for atualizada. Obviamente, este contexto está disponível apenas para ligações foreach.
$parent	Esta propriedade refere-se ao objeto ViewModel pai. Isso é útil quando se deseja acessar propriedades externas do ViewModel de dentro de um loop aninhado.
$parentContext	Esta propriedade é diferente da $parent, pois a $parent refere-se a dados. Considerando que $parentContext refere-se ao contexto de ligação.
$rawdata	Este contexto contém o valor bruto do ViewModel na situação atual. Esta propriedade se assemelha a $data, mas a diferença é que, se o ViewModel for agrupado em Observable, então $data será apenas desembrulhado. O ViewModel e $rawdata tornam-se dados observáveis reais.
$component	Este contexto é usado para se referir ao ViewModel daquele componente, quando está dentro de um determinado componente.
$componentTemplateNodes	É uma representação de uma matriz de nós DOM passados para esse componente específico quando se está dentro de um modelo de componente específico.

接続名は通常、登録された接続 (組み込みまたはカスタム) と一致するか、別の接続のパラメーターである必要があります。名前がそれらのどれにも一致しない場合、KnockoutJs はそれを無視します (エラーや警告は表示されません)。したがって、接続が機能しない場合は、まず名前が正しいかどうかを確認してください。

バインディング値は、単一の値、変数、リテラル、またはほぼすべての有効な JavaScript 式にすることができます。さまざまな接続値の例を次に示します:

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'">
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone">

以上がKnockoutJs でのバインディングの仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。