KnockoutJs에서 텍스트 및 모양 바인딩이 작동하는 방식

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

선적 서류 비치

• 데이터 바인딩 구문
• 컨텍스트 바인딩
• "표시" 및 "숨겨진" 바인딩
• "텍스트" 바인딩
• "html" 바인딩
• "class" 및 "css" 바인딩
• "스타일" 바인딩
• "attr" 바인딩

바인딩

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

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

텍스트 및 모양 제어

보이는

바인딩 표시는 ViewModel에 있는 observable 값을 기반으로 HTML 요소의 표시 여부를 제어하는 ​​데 사용됩니다. ViewModel.
에 정의된 특정 조건에 따라 요소를 표시하거나 숨길 수 있습니다.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

조건이 false(false, 0, null 또는 정의되지 않음)와 유사한 값인 경우 표시 바인딩은 스타일을 없음으로 설정하여 숨겨집니다. 이는 CSS를 사용하여 설정할 수 있는 모든 표시 스타일보다 우선순위가 높습니다.

숨겨진

바인딩 Hidden은 ViewModel의 관찰 가능 항목 값을 기반으로 HTML 요소를 숨기는 데 사용됩니다. 요소의 가시성을 제어하는 ​​*visible* 바인딩과 달리 *hidden* 바인딩은 지정된 조건이 충족되면 UI 요소를 숨깁니다.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

텍스트

바인딩 텍스트는 ViewModel의 관찰 가능 항목 값으로 HTML 요소의 콘텐츠를 업데이트하는 데 사용됩니다. observable의 텍스트를 HTML 요소에 직접 삽입할 수 있으므로 observable 값의 모든 변경 사항이 표시된 텍스트에 자동으로 반영됩니다.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

이 매개변수가 관찰 가능한 값인 경우 바인딩은 값이 변경될 때마다 요소의 텍스트를 업데이트합니다. 매개변수가 관찰 가능하지 않으면 요소 텍스트를 한 번만 설정하고 나중에 다시 업데이트하지 않습니다.

제공된 값이 숫자나 문자열이 아닌 경우 표시되는 텍스트는 yourParameter.toString()과 동일합니다.

이 바인딩은 텍스트 노드를 사용하여 텍스트 값을 설정하므로 HTML이나 스크립트 삽입 위험 없이 문자열 값을 설정하는 것이 안전합니다.

HTML

바인딩 html은 UI 요소에 동적 HTML 콘텐츠를 삽입하는 데 사용됩니다. observable에서 생성된 HTML이나 해당 ViewModel
의 표현식으로 요소의 콘텐츠를 업데이트할 수 있습니다.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

KnockoutJs는 이전 콘텐츠를 지운 다음 jQuery의 html 함수를 사용하거나 문자열을 HTML 노드로 구문 분석하고 jQuery가 그렇지 않은 경우 각 노드를 요소의 하위로 추가하여 요소 콘텐츠를 매개변수 값으로 설정합니다. 가능합니다.

이 매개변수가 observable인 경우 바인딩은 값이 변경될 때마다 요소의 콘텐츠를 업데이트합니다. 매개변수가 관찰 가능하지 않으면 요소의 콘텐츠를 한 번만 설정하고 나중에 다시 업데이트하지 않습니다.

제공된 값이 숫자나 문자열이 아닌 경우 표시되는 텍스트는 yourParameter.toString()과 동일합니다.

수업

바인딩 클래스는 observable의 값이나 ViewModel의 표현식을 기반으로 HTML 요소에 적용되는 CSS 클래스를 제어하는 ​​데 사용됩니다. 이를 통해 애플리케이션의 다양한 조건이나 상태에 따라 요소의 CSS 클래스를 동적으로 변경할 수 있습니다. 클래스는 법적 식별자 이름이 아닙니다. HTML 요소에 클래스를 할당하는 올바른 방법은 식별자 이름을 따옴표로 묶어 리터럴 문자열이 되도록 하는 것입니다.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

매개변수 값은 요소에 추가하려는 CSS 클래스에 해당하는 문자열이어야 합니다. 매개변수가 observable을 참조하는 경우 바인딩은 값이 변경될 때마다 클래스를 업데이트하여 이전에 추가된 클래스를 제거하고 새 값의 클래스를 추가합니다.

CSS

바인딩 CSS는 observable의 값이나 ViewModel의 표현식을 기반으로 HTML 요소에 CSS 스타일을 동적으로 적용하는 데 사용됩니다. 이를 통해 애플리케이션의 다양한 조건이나 상태에 따라 요소의 시각적 스타일을 변경할 수 있습니다. 이름을 따옴표로 묶어 동일한 조건을 기반으로 여러 CSS 클래스를 정의할 수 있습니다.

<div>
  <p data-bind="text: message">Este parágrafo exibirá o conteúdo do observable 'message'.</p>
    <p data-bind="text: 'Total: $' + totalAmount() + ' USD'">Este parágrafo exibirá o total formatado com base no valor do observable 'totalAmount'.</p>
    <p data-bind="text: 'Olá, ' + userName()">Este parágrafo saudará o usuário com base no valor do observable 'userName'.</p>
</div>

속성 이름이 CSS 클래스이고 그 값이 당시 클래스 적용 여부에 따라 true 또는 false로 평가되는 JavaScript 객체를 전달해야 합니다.

매개변수가 observable 값을 참조하는 경우 바인딩은 observable이 변경될 때마다 CSS 클래스를 추가하거나 제거합니다. 매개변수가 observable을 참조하지 않으면 클래스를 한 번만 추가하거나 제거하고 나중에 다시는 수행하지 않습니다.

스타일

바인딩 스타일은 observable의 값이나 ViewModel의 표현식을 기반으로 HTML 요소에 인라인 CSS 스타일을 적용하는 데 사용됩니다. 이를 통해 애플리케이션의 다양한 조건이나 상태에 따라 요소의 시각적 스타일을 인라인으로 직접 변경할 수 있습니다.

<div>
  <p data-bind="visible: isContentVisible">Este parágrafo está visível se isContentVisible for true.</p>
</div>

속성 이름이 스타일 이름에 해당하고 값이 적용하려는 스타일 값에 해당하는 JavaScript 개체를 전달해야 합니다.

매개변수가 observable을 참조하는 경우 바인딩은 observable이 변경될 때마다 스타일을 업데이트합니다. 매개변수가 관찰 가능 항목을 참조하지 않는 경우 스타일을 한 번만 설정하고 나중에 업데이트하지 않습니다.

이름이 합법적인 JavaScript 식별자가 아닌 스타일을 적용하려면(하이픈 등이 포함되어 있기 때문에) 스타일을 따옴표로 묶거나 camelCase와 함께 이름을 사용할 수 있습니다. 스타일.

• { 'font-weight': someValue }
• {fontWeight: someValue }

단위가 필요한 스타일에 간단한 숫자 값을 적용하면 KnockoutJs는 스타일을 설정하기 전에 값에 px를 추가합니다.

속성

바인딩 속성은 observable 또는 ViewModel 표현식의 값을 기반으로 요소의 HTML 속성을 설정하거나 업데이트하는 데 사용됩니다. 이를 통해 애플리케이션의 다양한 조건이나 상태에 따라 HTML 요소의 속성을 동적으로 변경할 수 있습니다.

<div>
  <p data-bind="hidden: isContentHidden">Este parágrafo está oculto se isContentHidden for true.</p>
</div>

속성 이름이 속성 이름에 해당하고 값이 적용하려는 속성 값에 해당하는 JavaScript 개체를 전달해야 합니다.

매개변수가 observable을 참조하는 경우 바인딩은 observable이 변경될 때마다 속성을 업데이트합니다. 매개변수가 observable을 참조하지 않는 경우 속성을 한 번만 설정하고 나중에 업데이트하지 않습니다.

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