knockout.js
Äquivalente von AngularJS-Bindungen

AngularJS ASP.NET asp.net-mvc C# Language CSS HTML JavaScript jQuery twitter-bootstrap TypeScript
Suche…


Bemerkungen

Nicht alles in AngularJS hat ein KnockoutJS-Äquivalent (z. B. ngCloack oder ngSrc ). Es gibt normalerweise zwei Hauptlösungen:

  1. Verwenden attr stattdessen die generische attr oder event Bindung.
  2. Ähnlich wie bei benutzerdefinierten Anweisungen in AngularJS können Sie Ihren eigenen benutzerdefinierten Bindungshandler schreiben, wenn Sie etwas benötigen, das nicht in der Basisbibliothek enthalten ist.

Wenn Sie die AngularJS-Bindungssyntax bevorzugen, können Sie die Verwendung von Knockout.Punches in Betracht ziehen, die eine Lenker-ähnliche Bindung ermöglicht.

ngShow

AngularJS-Code zum dynamischen Anzeigen / Ausblenden eines Elements: 

<p ng-show="SomeScopeProperty">This is conditionally shown.</p>

KnockoutJS-Äquivalent: 

<p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>

ngBind (geschweifte Markup)

AngularJS-Code zum Rendern von Klartext: 

<p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p>

KnockoutJS-Äquivalent: 

<p>
  <!-- ko text: ScopeObservableX --><!-- /ko --> 
  and 
  <!-- ko text: ScopeObservableY --><!-- /ko --> 
</p>

oder: 

<p>
  <span data-bind="text: ScopeObservableX"></span> 
  and 
  <span data-bind="text: ScopeObservableY"></span>
</p>

ngModel bei Eingabe [Typ = Text]

AngularJS-Code für die bidirektionale Bindung einer input : 

<input ng-model="ScopePropertyX" type="text" />

KnockoutJS-Äquivalent: 

<input data-bind="textInput: ScopeObservableX" type="text" />

ngHide

Es gibt keine direkte gleichwertige Bindung in KnockoutJS. Da das Ausblenden jedoch genau das Gegenteil von Zeigen ist, können wir das Beispiel für das ngShow Äquivalent von Knockout ngShow . 

<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>

KnockoutJS-Äquivalent: 

<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>

Im obigen KnockoutJS-Beispiel wird davon SomeScopeObservable dass SomeScopeObservable beobachtbar ist. Da wir es in einem Ausdruck verwenden (wegen des Operator ! SomeScopeObservable wir das () am Ende nicht weglassen.

ngClass

AngularJS-Code für dynamische Klassen: 

<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
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow