knockout.js => AngularJS 바인딩의 동등 물

비고

AngularJS의 모든 것이 KnockoutJS에 해당하는 것은 아닙니다 (예 : ngCloack 또는 ngSrc ). 일반적으로 사용 가능한 두 가지 주요 솔루션이 있습니다.

대신 일반 attr 또는 event 바인딩을 사용하십시오.
AngularJS의 사용자 지정 지시문과 마찬가지로 기본 라이브러리에 포함되지 않은 항목이 필요한 경우 사용자 지정 바인딩 처리기를 작성할 수 있습니다.

AngularJS 바인딩 구문을 선호하는 경우 Knockout.Punches 를 사용하여 핸들 막대 스타일 바인딩을 사용할 수 있습니다.

요소를 동적으로 표시 / 숨기기위한 AngularJS 코드 :

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

녹아웃 JS 동급 :

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

평문을 렌더링하기위한 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>

텍스트 input 에서 양방향 바인딩을위한 AngularJS 코드 :

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

녹아웃 JS 동급 :

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

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