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