knockout.js
Эквиваленты привязок AngularJS
Поиск…
замечания
Не все в 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>