knockout.js
Ekvivalenter av AngularJS-bindningar

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


Anmärkningar

Inte allt i AngularJS har en KnockoutJS-ekvivalent (till exempel ngCloack eller ngSrc ). Det finns två huvudsakliga lösningar:

  1. Använd i stället den generiska attr eller event .
  2. I likhet med anpassade direktiv i AngularJS kan du skriva din egen anpassade bindande hanterare om du behöver något som inte ingår i basbiblioteket.

Om du föredrar AngularJS bindande syntax kan du överväga att använda Knockout.Punches som möjliggör bindning i styrstilen.

ngShow

AngularJS-kod för att dynamiskt visa / dölja ett element: 

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

KnockoutJS motsvarande: 

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

ngBind (lockig markering)

AngularJS-kod för rendering av vanlig text: 

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

KnockoutJS motsvarande: 

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

eller: 

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

ngModel på input [typ = text]

AngularJS-kod för tvåvägsbindning på en input : 

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

KnockoutJS motsvarande: 

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

ngHide

Det finns ingen direkt motsvarande bindning i KnockoutJS. Men eftersom gömmer är precis motsatsen till att visa, kan vi bara invertera exemplet för Knockouts ngShow ekvivalent . 

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

KnockoutJS motsvarande: 

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

Ovanstående KnockoutJS-exempel antar att SomeScopeObservable är ett observerbart, och eftersom vi använder det i ett uttryck (på grund av ! Operatören framför det) kan vi inte utelämna () i slutet.

ngClass

AngularJS-kod för dynamiska klasser: 

<p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p>

KnockoutJS motsvarande: 

<p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>


Modified text is an extract of the original Stack Overflow Documentation
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow