knockout.js
Equivalents des liaisons AngularJS
Recherche…
Remarques
Tout dans AngularJS ne possède pas un équivalent KnockoutJS (par exemple ngCloack
ou ngSrc
). Deux solutions principales sont généralement disponibles:
- Utilisez plutôt l'
attr
génériqueattr
ou l'event
. - Semblable aux directives personnalisées dans AngularJS, vous pouvez écrire votre propre gestionnaire de liaison personnalisé si vous avez besoin de quelque chose qui n'est pas inclus dans la bibliothèque de base.
Si vous préférez la syntaxe de liaison AngularJS, vous pouvez envisager d'utiliser Knockout.Punches, qui active la liaison de type guidon.
ngShow
Code AngularJS pour afficher / masquer dynamiquement un élément:
<p ng-show="SomeScopeProperty">This is conditionally shown.</p>
KnockoutJS équivalent:
<p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>
ngBind (balisage bouclé)
Code AngularJS pour le rendu du texte brut:
<p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p>
KnockoutJS équivalent:
<p>
<!-- ko text: ScopeObservableX --><!-- /ko -->
and
<!-- ko text: ScopeObservableY --><!-- /ko -->
</p>
ou:
<p>
<span data-bind="text: ScopeObservableX"></span>
and
<span data-bind="text: ScopeObservableY"></span>
</p>
ngModel en entrée [type = text]
Code AngularJS pour une liaison bidirectionnelle sur une input
texte:
<input ng-model="ScopePropertyX" type="text" />
KnockoutJS équivalent:
<input data-bind="textInput: ScopeObservableX" type="text" />
ngHide
Il n'y a pas de liaison équivalente directe dans KnockoutJS. Cependant, puisque cacher est le contraire de montrer, nous pouvons simplement inverser l'exemple pour l'équivalent ngShow
de Knockout .
<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>
KnockoutJS équivalent:
<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>
L'exemple KnockoutJS ci-dessus suppose que SomeScopeObservable
est une observable, et comme nous l'utilisons dans une expression (à cause de l'opérateur !
), Nous ne pouvons pas omettre le ()
à la fin.
ngClass
Code AngularJS pour les classes dynamiques:
<p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p>
KnockoutJS équivalent:
<p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>