CSS
此繫結將提供的 CSS 類應用於該元素。當給定條件被鬆散地評估為真時,將應用靜態類。動態類使用可觀察或計算的值。
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; }
另見: 官方文件 。