knockout.js
Equivalenti di attacchi AngularJS
Ricerca…
Osservazioni
Non tutto in AngularJS ha un equivalente KnockoutJS (ad esempio ngCloack o ngSrc ). Esistono generalmente due soluzioni principali:
- Utilizzare invece il collegamento generico
attroevent. - Analogamente alle direttive personalizzate in AngularJS, puoi scrivere il tuo gestore di binding personalizzato se hai bisogno di qualcosa che non è incluso nella libreria di base.
Se preferisci la sintassi dell'associazione AngularJS, puoi prendere in considerazione l'utilizzo di Knockout.Punch che consente il binding in stile manubrio.
ngShow
Codice AngularJS per mostrare / nascondere un elemento in modo dinamico:
<p ng-show="SomeScopeProperty">This is conditionally shown.</p>
Equivalente KnockoutJS:
<p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>
ngBin (markup ricci)
Codice AngularJS per il rendering di testo normale:
<p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p>
Equivalente 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 su input [tipo = testo]
Codice AngularJS per il bind a due vie su un input testo:
<input ng-model="ScopePropertyX" type="text" />
Equivalente KnockoutJS:
<input data-bind="textInput: ScopeObservableX" type="text" />
ngHide
Non esiste un legame equivalente diretto in KnockoutJS. Tuttavia, poiché nascondere è esattamente l'opposto di mostrare, possiamo semplicemente invertire l'esempio per l'equivalente di ngShow di Knockout .
<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>
Equivalente KnockoutJS:
<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>
Il precedente esempio KnockoutJS presuppone che SomeScopeObservable sia osservabile, e poiché lo usiamo in un'espressione (a causa dell'operatore ! fronte ad esso) non possiamo omettere il () alla fine.
ngClass
Codice AngularJS per classi dinamiche:
<p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p>
Equivalente KnockoutJS:
<p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>