KnockoutJs에서 바인딩이 작동하는 방식

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

선적 서류 비치

• 데이터 바인딩 구문
• 컨텍스트 바인딩

바인딩

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

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

data-bind 속성은 완벽하게 허용되지만 HTML에 기본이 아닙니다(HTML 5와 엄격하게 호환되며 HTML 4에서는 문제를 일으키지 않습니다. 그러나 브라우저는 기본적으로 이 속성을 인식하지 못하므로 다음이 필요합니다). 녹아웃을 활성화하면 적용됩니다.

바인딩 구문

KnockoutJs의 선언적 바인딩 시스템은 데이터를 UI에 바인딩하는 간결하고 강력한 방법을 제공합니다. 일반적으로 간단한 데이터 속성에 바인딩하거나 단일 바인딩을 사용하는 것은 쉽고 분명합니다. 더 복잡한 바인딩의 경우 KnockoutJs 바인딩 시스템의 동작과 구문을 더 잘 이해하는 데 도움이 됩니다.

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

통화는 통화 이름과 값의 두 항목으로 구성되며 콜론으로 구분됩니다. 요소에는 여러 링크(관련 또는 비관련)가 포함될 수 있으며 각 링크는 쉼표로 구분됩니다. 현재 바인딩에 사용되는 데이터는 개체에서 참조할 수 있습니다. 이 개체를 바인딩 컨텍스트(바인딩 컨텍스트)라고 합니다.

바인딩 값은 단일 값, 변수, 리터럴 또는 거의 모든 유효한 JavaScript 표현식일 수 있습니다.

링크에는 공백(공백, 탭, 줄 바꿈)이 포함될 수 있으므로 이를 사용하여 원하는 대로 링크를 구성할 수 있습니다.

링크에는 JavaScript 스타일 주석(//... 및 /*...*/)이 포함될 수 있습니다. 예:

값 없이 바인딩을 지정하면 KnockoutJs는 해당 바인딩에 정의되지 않은 값을 부여합니다.

컨텍스트 계층 구조는 KnockoutJS에 의해 자동으로 생성되고 관리됩니다. 다음은 KO에서 제공하는 다양한 유형의 바인딩 컨텍스트 목록입니다.

Variável de Contexto	Descrição
$root	Esta propriedade sempre se refere ao ViewModel de nível superior. Isso torna possível acessar métodos de nível superior para manipular ViewModel. Geralmente esse é o objeto passado para ko.applyBindings.
$data	Esta propriedade é muito parecida com a palavra-chave this do Javascript. A propriedade $data em um contexto de ligação refere-se ao objeto ViewModel para o contexto atual.
$index	Esta propriedade contém o índice de um item atual de um array dentro de um loop foreach. O valor de $index mudará automaticamente conforme e quando a matriz Observable subjacente for atualizada. Obviamente, este contexto está disponível apenas para ligações foreach.
$parent	Esta propriedade refere-se ao objeto ViewModel pai. Isso é útil quando se deseja acessar propriedades externas do ViewModel de dentro de um loop aninhado.
$parentContext	Esta propriedade é diferente da $parent, pois a $parent refere-se a dados. Considerando que $parentContext refere-se ao contexto de ligação.
$rawdata	Este contexto contém o valor bruto do ViewModel na situação atual. Esta propriedade se assemelha a $data, mas a diferença é que, se o ViewModel for agrupado em Observable, então $data será apenas desembrulhado. O ViewModel e $rawdata tornam-se dados observáveis reais.
$component	Este contexto é usado para se referir ao ViewModel daquele componente, quando está dentro de um determinado componente.
$componentTemplateNodes	É uma representação de uma matriz de nós DOM passados para esse componente específico quando se está dentro de um modelo de componente específico.

연결 이름은 일반적으로 등록된 연결(내장 또는 사용자 정의)과 일치하거나 다른 연결에 대한 매개변수여야 합니다. 이름이 이들 중 어느 것과도 일치하지 않으면 KnockoutJs는 이를 무시합니다(오류나 경고 없이). 그러니 연결이 되지 않는다면 먼저 이름이 맞는지 확인해 보세요.

바인딩 값은 단일 값, 변수, 리터럴 또는 거의 모든 유효한 JavaScript 표현식일 수 있습니다. 다음은 다양한 연결 값의 예입니다.

Today's message is: <span data-bind="text: myMessage"></span>

<!-- related bindings: valueUpdate is a parameter for value -->
Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'" />
 
<!-- unrelated bindings -->
Cellphone: <input data-bind="value: cellphoneNumber, enable: hasCellphone" />

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