Knockout 텍스트를 사용하여 DOM_Basic 지식을 바인딩하는 방법

간단 바인딩

코드 복사 코드는 다음과 같습니다.

오늘의 메시지는 다음과 같습니다.




KO는 요소(IE)의 innerText 또는 textContent(Firefox)에 매개변수 값을 설정합니다. 및 기타 유사한 브라우저) 속성. 원본 텍스트를 덮어쓰게 됩니다.

매개변수가 관찰 가능한 경우 해당 요소의 텍스트는 매개변수 값 변경에 따라 업데이트됩니다. 그렇지 않은 경우 해당 요소의 텍스트는 한 번만 설정되며 향후 업데이트되지 않습니다.
전달하는 내용이 숫자나 문자열(예: 개체 또는 배열)이 아닌 경우 표시되는 텍스트는 yourParameter.toString()과 동일합니다.
함수나 표현식을 사용하여 텍스트 값 결정
계속해서 위의 ViewModel에 속성을 추가하고 종속성 모니터링 속성을 추가합니다

코드 복사 코드는 다음과 같습니다.

price: ko.observable(24.95)

viewModel.priceRating = ko.dependentObservable(
function() {
return this .price() > 50 ? "expensive" : "affordable";
    }, viewModel);


바인딩을 위한 UI 페이지 요소 추가

코드 복사 코드는 다음과 같습니다.

항목은

이제 가격 변화에 따라 텍스트가 "비싼"과 "저렴한" 사이를 번갈아 가며 표시됩니다.