KnockoutJs에서 제어 흐름 바인딩이 작동하는 방식

이 콘텐츠는 기본적으로 원본 자료를 번역한 것입니다. Magento 2용 KnockoutJ에 대해 배우고 KnockouJ에 대한 포르투갈어 콘텐츠를 제작하려는 의도입니다.

선적 서류 비치

• 데이터 바인딩 구문
• 컨텍스트 바인딩
• "foreach" 바인딩
• "if" 및 "ifnot" 바인딩
• "with" 및 "using" 바인딩
• "let" 바인딩

---

바인딩

KnockoutJs에서 바인딩은 ViewModel(데이터 및 비즈니스 로직)의 논리를 View(HTML)과 연결하는 방법입니다. 즉, DOM을 직접 조작할 필요 없이 바인딩을 통해 사용자 인터페이스가 데이터의 변경 사항을 자동으로 반영합니다.

KnockoutJs의 바인딩은 HTML 요소의 data-bind 속성을 통해 작동합니다. 이 속성은 사용하려는 바인딩과 관련 값을 지정하는 곳입니다.

제어 흐름

foreach

바인딩 foreach는 HTML 요소에서 반복을 생성하여 컬렉션의 각 항목에 대해 동일한 요소의 복사본을 생성하는 데 사용됩니다(예: 배열 또는 관찰 가능한 배열) ) 뷰 모델에 추가하세요. 이를 통해 모델의 데이터를 표시하는 목록이나 피벗 테이블을 쉽게 만들 수 있습니다.

모델 배열의 내용이 수정되면(항목을 추가, 이동 또는 삭제하여) foreach의 바인딩은 효율적인 알고리즘을 사용하여 다음을 찾습니다. 배열에 따라 DOM을 업데이트할 수 있습니다. 이는 시뮬레이션된 변경 사항의 임의 조합을 처리할 수 있음을 의미합니다.

• 배열에 항목이 추가되면 foreach는 모델의 새 복사본을 렌더링하여 기존 DOM에 삽입합니다.
• 배열의 항목이 삭제되면 foreach는 해당 DOM 요소만 제거합니다.
• 배열에서 항목을 재정렬할 때(동일한 개체 인스턴스 유지) foreach는 일반적으로 해당 DOM 요소를 새 위치로 이동합니다.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

이 경우 $data 변수는 루프에서 현재 처리 중인 항목을 참조합니다. 이를 통해 루프 내에서 해당 항목의 속성이나 값에 액세스할 수 있습니다.

as 지시문을 사용하면 foreach 반복 주기에서 현재 항목을 나타내는 변수에 대한 사용자 정의 이름을 정의할 수 있습니다. 이렇게 하면 코드를 더 읽기 쉽고 의미 있게 만들 수 있습니다.

때때로 배열의 항목을 삭제하지 않고 숨겨서 해당 항목의 존재를 추적해야 하는 경우가 있습니다. 이를 비파괴적 삭제라고 합니다. 삭제된 항목을 숨겨야 하는 경우 includeDestroyed 옵션을 false로 설정하세요.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

생성된 DOM 요소에 추가 맞춤 로직을 수행해야 하는 경우 다음 콜백 중 하나를 사용할 수 있습니다.

• afterRender: foreach 블록이 복제되어 문서에 삽입될 때마다 호출됩니다(foreach가 처음 초기화될 때와 나중에 새 항목이 연결된 배열;
에 추가될 때).
• afterAdd:는 afterRender와 비슷하지만 배열에 새 항목이 추가될 때만 호출된다는 점이 다릅니다(foreach가 배열의 초기 콘텐츠를 처음 반복할 때는 호출되지 않음).
• beforeRemove: 배열의 항목이 제거될 때 해당 DOM 노드가 제거되기 전에 호출됩니다. beforeRemove 콜백이 지정된 경우 DOM 노드를 수동으로 제거해야 합니다. 즉, KnockoutJ는 언제 DOM 노드를 물리적으로 제거할 수 있는지 알 수 없습니다.
• beforeMove: 배열의 항목이 배열에서 위치가 변경되었지만 해당 DOM 노드가 이동되기 전에 호출됩니다. beforeMove는 인덱스가 변경된 모든 배열 요소에 적용되므로 배열의 시작 부분에 새 항목이 삽입되면 콜백(지정된 경우)은 인덱스로 다른 모든 요소에 대해 트리거됩니다. 위치가 하나 늘었습니다. beforeMove를 사용하면 영향을 받는 요소의 원래 화면 좌표를 저장할 수 있으므로 afterMove 콜백에서 해당 요소의 움직임을 애니메이션화할 수 있습니다.
• afterMove: 배열의 항목이 배열에서 위치가 변경된 후 및 foreach가 일치하도록 DOM을 업데이트한 후에 호출됩니다. afterMove는 인덱스가 변경된 배열의 모든 요소에 적용되므로 배열 시작 부분에 새 항목이 삽입되면 콜백(지정된 경우)이 트리거됩니다. 인덱스 위치가 1만큼 증가했기 때문에 다른 모든 요소의 경우.

만약과 그렇지 않다면

if의 바인딩은 지정된 표현식이 true(또는 null이 아닌 객체 또는 비어 있지 않은 문자열).

ifnot의 바인딩은 전달된 표현식의 결과를 반전시킨다는 점을 제외하면 if 바인딩과 정확히 동일하게 작동합니다.

if와 ifnot은 생생한 바인딩과 숨겨진 바인딩과 비슷한 역할을 합니다. 차이점은 보이는 경우 포함된 마크업은 항상 DOM에 남아 있고 항상 데이터 바인딩이 적용된다는 것입니다. 보이는 바인딩은 CSS를 사용하여 포함 요소의 가시성을 전환합니다. 그러나 if 링크는 DOM에 포함된 마크업을 물리적으로 추가하거나 제거하고 식이 참인 경우에만 하위 항목에 링크를 적용합니다. 표현식에 관찰 가능한 값이 포함된 경우 값이 변경될 때마다 표현식이 재평가됩니다.

<div>
  <ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
  </ul>

  <ul data-bind="foreach: getItems()">
    <li>
        <span data-bind="text: name"></span> - <span data-bind="text: age"></span>
    </li>
  </ul>

  <ul data-bind="foreach: { data: people, as: 'person' }"></ul>
</div>

와 함께 그리고 사용하기

바인딩 with 및 using은 새 바인딩 컨텍스트를 생성하므로 하위 요소가 지정된 개체의 컨텍스트에 바인딩됩니다.

바인딩은 관련 값이 거짓

인지 여부에 따라 하위 요소를 동적으로 추가하거나 제거합니다.

이 옵션을 사용하면 새 컨텍스트 개체에 대한 별칭을 정의할 수 있습니다. $data.
컨텍스트 변수를 사용하여 객체를 참조하는 것이 가능하지만

<div data-bind='foreach: { data: myArray, includeDestroyed: false }'>
    ...
</div>

using 바인딩은 하위 요소 렌더링을 원하지 않는 경우 with를 대체하기 위해 KnockoutJs 3.5에서 도입되었습니다. using은 다시 렌더링하는 대신 하위 연결을 재평가하므로 각 하위 연결에는 사용 컨텍스트에 대한 추가 종속성이 포함됩니다.

허락하다

바인딩을 사용하면 모든 하위 요소의 바인딩에서 참조할 수 있는 사용자 정의 바인딩 컨텍스트 속성을 정의할 수 있습니다.

<div data-bind="if: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for verdadeiro.</p>
</div>

<div data-bind="ifnot: exibirMensagem">
    <p>Esta mensagem será exibida se 'exibirMensagem' for falso.</p>
</div>

위 내용은 KnockoutJs에서 제어 흐름 바인딩이 작동하는 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!