knockout.js
Equivalenten van AngularJS-bindingen
Zoeken…
Opmerkingen
Niet alles in AngularJS heeft een KnockoutJS-equivalent (bijvoorbeeld ngCloack of ngSrc ). Er zijn doorgaans twee hoofdoplossingen beschikbaar:
- Gebruik in plaats daarvan de generieke
attrofeventbinding. - Net als aangepaste richtlijnen in AngularJS, kunt u uw eigen aangepaste bindende handler schrijven als u iets nodig hebt dat niet in de basisbibliotheek is opgenomen.
Als u de voorkeur geeft aan de AngularJS-bindingssyntaxis, kunt u overwegen Knockout.Punches te gebruiken, waardoor binding in stuurstijl mogelijk is.
ngShow
AngularJS-code voor het dynamisch weergeven / verbergen van een element:
<p ng-show="SomeScopeProperty">This is conditionally shown.</p>
KnockoutJS-equivalent:
<p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>
ngBind (gekrulde markup)
AngularJS-code voor het weergeven van platte tekst:
<p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p>
KnockoutJS-equivalent:
<p>
<!-- ko text: ScopeObservableX --><!-- /ko -->
and
<!-- ko text: ScopeObservableY --><!-- /ko -->
</p>
of:
<p>
<span data-bind="text: ScopeObservableX"></span>
and
<span data-bind="text: ScopeObservableY"></span>
</p>
ngModel bij invoer [type = tekst]
AngularJS-code voor tweerichtingsbinding bij een input :
<input ng-model="ScopePropertyX" type="text" />
KnockoutJS-equivalent:
<input data-bind="textInput: ScopeObservableX" type="text" />
ngHide
Er is geen directe gelijkwaardige binding in KnockoutJS. Omdat verbergen echter precies het tegenovergestelde is van weergeven, kunnen we het voorbeeld voor het ngShow equivalent van Knockout gewoon omkeren.
<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>
KnockoutJS-equivalent:
<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>
In het bovenstaande KnockoutJS-voorbeeld wordt ervan uitgegaan dat SomeScopeObservable een waarneembaar is en omdat we het gebruiken in een expressie (vanwege de ! SomeScopeObservable ervoor) kunnen we de () aan het einde niet weglaten.
ngClass
AngularJS-code voor dynamische klassen:
<p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p>
KnockoutJS-equivalent:
<p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>