knockout.js
Equivalentes de los enlaces AngularJS
Buscar..
Observaciones
No todo en AngularJS tiene un equivalente KnockoutJS (por ejemplo ngCloack o ngSrc ). Hay dos soluciones principales típicamente disponibles:
- Utilice el
attrgenérico o el enlace deeventlugar. - Al igual que las directivas personalizadas en AngularJS, puede escribir su propio controlador de enlace personalizado si necesita algo que no esté incluido en la biblioteca base.
Si prefiere la sintaxis de enlace de AngularJS puede considerar el uso de Knockout.Punches que habilita el enlace de estilo de manillar.
ngShow
Código AngularJS para mostrar / ocultar dinámicamente un elemento:
<p ng-show="SomeScopeProperty">This is conditionally shown.</p>
Equivalente a KnockoutJS:
<p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>
ngBind (marcado rizado)
Código AngularJS para renderizar texto plano:
<p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p>
Equivalente a KnockoutJS:
<p>
<!-- ko text: ScopeObservableX --><!-- /ko -->
and
<!-- ko text: ScopeObservableY --><!-- /ko -->
</p>
o:
<p>
<span data-bind="text: ScopeObservableX"></span>
and
<span data-bind="text: ScopeObservableY"></span>
</p>
ngModel en la entrada [tipo = texto]
Código AngularJS para enlace bidireccional en una input texto:
<input ng-model="ScopePropertyX" type="text" />
Equivalente a KnockoutJS:
<input data-bind="textInput: ScopeObservableX" type="text" />
ngOcultar
No hay un enlace equivalente directo en KnockoutJS. Sin embargo, dado que la ocultación es justo lo contrario de mostrar, podemos invertir el ejemplo para el equivalente ngShow de Knockout .
<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>
Equivalente a KnockoutJS:
<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>
El ejemplo anterior de KnockoutJS asume que SomeScopeObservable es un observable, y debido a que lo usamos en una expresión (debido al operador ! Delante de él) no podemos omitir el () al final.
clase ng
Código AngularJS para clases dinámicas:
<p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p>
Equivalente a KnockoutJS:
<p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>