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 on input [유형 = 텍스트]
텍스트 input
에서 양방향 바인딩을위한 AngularJS 코드 :
<input ng-model="ScopePropertyX" type="text" />
녹아웃 JS 동급 :
<input data-bind="textInput: ScopeObservableX" type="text" />
ngHide
KnockoutJS에는 직접적인 동등한 바인딩이 없습니다. 그러나 숨기기는 보여주는 ngShow
Knockout의 ngShow
해당하는 예제를 반전시킬 수 있습니다.
<p ng-hide="SomeScopeProperty">This is conditionally shown.</p>
녹아웃 JS 동급 :
<p data-bind="visible: !SomeScopeObservable()">This is conditionally hidden.</p>
위의 KnockoutJS 예제는 SomeScopeObservable
이 관찰 가능하다고 가정하고 표현식에서 사용하기 때문에 (앞의 !
연산자로 인해 ()
끝에 ()
를 생략 할 수 없습니다.
응급실
동적 클래스 용 AngularJS 코드 :
<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