knockout.js
바인딩 - 텍스트 및 모양
수색…
본문
text
바인딩은 모든 요소와 함께 사용되어 innerText를 업데이트 할 수 있습니다.
<p>
<span data-bind="text: greeting"></span>,
<span data-bind="text: subject"></span>.
</p>
ko.applyBindings({
greeting: ko.observable("Hello"),
subject: ko.observable("world")
});
text
바인딩은 가상 요소와 함께 사용할 수도 있습니다.
<p>
<!--ko text: greeting--><!--/ko-->,
<!--ko text: subject--><!--/ko-->.
</p>
CSS
이 바인딩은 제공된 CSS 클래스를 요소에 적용합니다. 정적 클래스는 주어진 조건이 true로 느슨하게 평가 될 때 적용됩니다. 동적 클래스는 관찰 가능 또는 계산 된 값을 사용합니다.
page.html
<p data-bind="css: { danger: isInDanger }">Checks external expression</p>
<p data-bind="css: { danger: dangerLevel() > 10 }">Expression can be inline</p>
<p data-bind="css: { danger: isInDanger, glow: shouldGlow }">Multiple classes</p>
<p data-bind="css: dynamicObservable">Dynamic CSS class from observable</p>
<p data-bind="css: dynamicComputed">Dynamic CSS class from computed</p>
page.js
ko.applyBindings({
isInDanger: ko.observable(true),
dangerLevel: ko.observable(5),
isHot: ko.observable(true),
shouldGlow: ko.observable(true),
dynamicObservable: ko.observable('highlighted'),
dynamicComputed: ko.computed(function() {
var customClass = "";
if(dangerLevel() >= 15 ) {
customClass += " danger";
}
if(dangerLevel() >= 10) {
customClass += " glow";
}
if(dangerLevel() >= 5) {
customClass += " highlighted";
}
return customClass;
});
});
page.css
.danger { background: red; }
.glow { box-shadow: 5px 5px 5px gold; }
.highlighted { color: purple; }
또한 : 공식 문서를 참조하십시오.
명백한
DOM 요소 표시 / 숨기기에 사용할 수 있습니다. if
를 사용 if
것과 비슷하지만 visible
이 여전히 요소를 만들고 display:none
설정한다는 점을 제외하고는.
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
<script type="text/javascript">
var viewModel = {
shouldShowMessage: ko.observable(true);
};
</script>
아츠
attr
바인딩을 사용하여 요소에 추가 속성을 적용하십시오. href, src 또는 임의의 데이터 속성을 설정하는 데 가장 일반적으로 사용됩니다.
<img data-bind="attr: { src: url, title: title }"/>
var viewModel = {
url: ko.observable("images/example.png"),
title: "example title"
};
HTML
이 바인딩은 jQuery가 참조 된 경우 jQuery.html()
사용하여 요소의 innerHTML을 업데이트하고, 그렇지 않으면 KO의 자체 구문 분석 논리를 업데이트합니다. API, RSS 피드 등에서 HTML을 검색하는 경우 유용 할 수 있습니다.이 태그를 사용자 입력 HTML과 함께 사용하는 것에 유의하십시오.
page.html
<p>
<span data-bind="html: demoLink"></span>
</p>
page.js
ko.applyBindings({
demoLink: ko.observable("<a href='#'>Make a link</a>")
});
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow