knockout.js
Equivalents des liaisons AngularJS

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript jQuery twitter-bootstrap TypeScript
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:

  1. Utilisez plutôt l' attr générique attr ou l' event .
  2. 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>


Modified text is an extract of the original Stack Overflow Documentation
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow