간단 바인딩
오늘의 메시지는 다음과 같습니다.
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 페이지 요소 추가
항목은
이제 가격 변화에 따라 텍스트가 "비싼"과 "저렴한" 사이를 번갈아 가며 표시됩니다. 이 바인딩은 요소의 innerText 또는 textContent(innerHTML이 아님)를 설정하기 때문에 안전하고 HTML이나 스크립트 삽입의 위험이 없습니다. 예를 들어 다음과 같은 코드를 작성한다면:
IE6에는 범위에 공백이 있으면 자동으로 빈 범위가 되는 문제가 있습니다. 다음과 같은 코드를 작성하려는 경우 Knockout은 아무런 효과가 없습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
