knockout.js
AngularJSバインディングに相当する
サーチ…
備考
AngularJSのすべてがKnockoutJSの同等物を持っているわけではありません(たとえば、 ngCloack
またはngSrc
)。一般的に利用可能な主な解決策は2つあります。
- 代わりに汎用
attr
またはevent
バインディングを使用してください。 - AngularJSのカスタムディレクティブと同様に、ベースライブラリに含まれていないものが必要な場合は、独自のカスタムバインディングハンドラを記述できます。
AngularJSバインディング構文が好きな場合は、 Knockout.Punchesを使用してハンドルバースタイルのバインドを有効にすることを検討できます。
ngShow
要素を動的に表示/非表示するためのAngularJSコード:
<p ng-show="SomeScopeProperty">This is conditionally shown.</p>
KnockoutJS相当:
<p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>
ngBind(カーリーマークアップ)
プレーンテキストをレンダリングするためのAngularJSコード:
<p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p>
KnockoutJS相当:
<p>
<!-- ko text: ScopeObservableX --><!-- /ko -->
and
<!-- ko text: ScopeObservableY --><!-- /ko -->
</p>
または:
<p>
<span data-bind="text: ScopeObservableX"></span>
and
<span data-bind="text: ScopeObservableY"></span>
</p>
ngModel on input [type = text]
テキストinput
双方向バインディングのAngularJSコード:
<input ng-model="ScopePropertyX" type="text" />
KnockoutJS相当:
<input data-bind="textInput: ScopeObservableX" type="text" />
ngHide
KnockoutJSには直接同等のバインディングはありません。しかし、隠蔽は表示とは正反対であるため、KnockoutのngShow
相当する例を逆転することができます。
<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>
KnockoutJS相当:
<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>
上記のKnockoutJSの例では、 SomeScopeObservable
は観測可能であると仮定しており、式の中に!
演算子を使用しているため、最後に()
を省略することはできません。
クラス
動的クラスのためのAngularJSコード:
<p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p>
KnockoutJS相当:
<p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow