knockout.js
Эквиваленты привязок AngularJS

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

замечания

Не все в AngularJS имеют эквивалент KnockoutJS (например, ngCloack или ngSrc ). Доступны два основных решения:

Вместо этого используйте общий привязку attr или event .
Подобно пользовательским директивам в AngularJS, вы можете написать собственный собственный обработчик привязки, если вам нужно что-то, что не включено в базовую библиотеку.

Если вы предпочитаете синтаксис привязки AngularJS, вы можете рассмотреть возможность использования Knockout.Punches, которая позволяет привязать стиль в стиле руля.

ngShow

Код AngularJS для динамического отображения / скрытия элемента:

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

Нокаут JS эквивалент:

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

ngBind (курсовая разметка)

Код AngularJS для отображения простого текста:

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

Нокаут JS эквивалент:

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

или же:

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

ngModel на входе [type = text]

Код AngularJS для двусторонней привязки к текстовому input :

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

Нокаут JS эквивалент:

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

ngHide

В KnockoutJS нет прямого эквивалентного связывания. Однако, поскольку скрытие является просто противоположным ngShow , мы можем просто инвертировать пример эквивалента ngShow для нокаута .

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

Нокаут JS эквивалент:

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

Выше KnockoutJS пример предполагается SomeScopeObservable является наблюдаемым, а потому , что мы используем его в выражении (из-за ! Оператор перед ним) , мы не можем опускать () в конце.

ngClass

Угловой код для динамических классов:

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

Нокаут JS эквивалент:

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

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow