knockout.js
Odpowiedniki wiązań AngularJS
Szukaj…
Uwagi
Nie wszystko w AngularJS ma odpowiednik KnockoutJS (na przykład ngCloack lub ngSrc ). Zazwyczaj dostępne są dwa główne rozwiązania:
- Zamiast tego użyj ogólnego wiązania
attrlubevent. - Podobnie do niestandardowych dyrektyw w AngularJS, możesz napisać własny niestandardowy moduł obsługi powiązań, jeśli potrzebujesz czegoś, czego nie ma w bibliotece podstawowej.
Jeśli wolisz składnię wiązania AngularJS, możesz rozważyć użycie Knockout.Punches, która umożliwia wiązanie w stylu kierownicy.
ngShow
Kod AngularJS do dynamicznego wyświetlania / ukrywania elementu:
<p ng-show="SomeScopeProperty">This is conditionally shown.</p>
Odpowiednik KnockoutJS:
<p data-bind="visible: SomeScopeObservable">This is conditionally shown.</p>
ngBind (kręcone znaczniki)
Kod AngularJS do renderowania zwykłego tekstu:
<p>{{ ScopePropertyX }} and {{ ScopePropertyY }}</p>
Odpowiednik KnockoutJS:
<p>
<!-- ko text: ScopeObservableX --><!-- /ko -->
and
<!-- ko text: ScopeObservableY --><!-- /ko -->
</p>
lub:
<p>
<span data-bind="text: ScopeObservableX"></span>
and
<span data-bind="text: ScopeObservableY"></span>
</p>
ngModel na wejściu [type = text]
Angularjs kod dwukierunkowy wiążące dla tekstu input :
<input ng-model="ScopePropertyX" type="text" />
Odpowiednik KnockoutJS:
<input data-bind="textInput: ScopeObservableX" type="text" />
ngHide
W KnockoutJS nie ma bezpośredniego równoważnego wiązania. Ponieważ jednak ukrywanie jest przeciwieństwem pokazywania, możemy po prostu odwrócić przykład ekwiwalentu ngShow Knockouta .
<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>
Odpowiednik KnockoutJS:
<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>
Powyższy przykład KnockoutJS zakłada, że SomeScopeObservable jest obserwowalny, a ponieważ używamy go w wyrażeniu (z powodu przed nim operatora ! ), Nie możemy pominąć () na końcu.
ngClass
Kod AngularJS dla klas dynamicznych:
<p ng-class="{ highlighted: scopeVariableX, 'has-error': scopeVariableY }">Text.</p>
Odpowiednik KnockoutJS:
<p data-bind="css: { highlighted: scopeObservableX, 'has-error': scopeObservableY }">Text.</p>