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>")
});