knockoutjs style binding
- css binding是針對DOM element來套用CSS 的中Class並做bind關聯。
- style binding是針對DOM element來套用CSS中的style屬性並做bind關聯。
<!DOCTYPE html>
<html>
<head>
<title>Style Binding example</title>
<meta charset="UTF-8"/>
<style>
*{
margin: 0px 0px 0px 0px;
}
li{
list-style: none;
display: inline;
}
</style>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<script>
$(document).ready(function(){
var viewModel = {
titleColor : ko.observable('#FFFFFF'),
titleBackground : ko.observable('#0F4E8A'),
articleColor : ko.observable('#F43281'),
articleBackground : ko.observable('#C0E1F6'),
divIsBlue : ko.observable(true),
divColor : ko.observable('#FFFFFF'),
cubeWidth:ko.observable('50px'),
cubeHeight:ko.observable('50px'),
cubeTop:ko.observable(0),
cubeBgColor:ko.observable('#FF0086'),
};
ko.applyBindings(viewModel);
$("input[name='colorProvder']").change(function(){
// your code here
if(arguments != null && arguments.length > 0)
viewModel.cubeBgColor(arguments[0].currentTarget.value);
});
});
</script>
</head>
<body>
<h1 data-bind="style:{ color: titleColor , 'background-color':titleBackground}">將進酒 李白</h1>
<p data-bind="style: { color: articleColor , 'background-color':articleBackground}">
君不見黃河之水天上來，奔流到海不復回；<br/>
君不見高堂明鏡悲白髮，朝如青絲暮成雪。 <br/>
人生得意須盡歡，莫使金樽空對月。 <br/>
天生我材必有用，千金散盡還復來。<br/>
烹羊宰牛且為樂，會須一飲三百杯。 <br/>
岑夫子，丹丘生，<br/>
將進酒，君莫停。 <br/>
與君歌一曲，<br/>
請君為我側耳聽。 <br/>
鐘鼓饌玉不足貴，但願長醉不願醒。<br/>
古來聖賢皆寂寞，惟有飲者留其名。 <br/>
陳王昔時宴平樂，鬥酒十千恣歡謔。 <br/>
主人何為言少錢，徑須沽取對君酌。 <br/>
五花馬，千金裘，<br/>
呼兒將出換美酒，與爾同消萬古愁。<br/>
</p>
<div data-bind="style: {backgroundColor: divIsBlue() == true ? 'blue' : 'red' , color:divColor}">
Hello World!
</div>
<div data-bind="style:{width:cubeWidth() ,height:cubeHeight(), backgroundColor: cubeBgColor() }">Cube A</div>
<br />
<div data-bind="style:{width:cubeWidth() ,height:cubeHeight(), backgroundColor: cubeBgColor() }">Cube B</div>
<span>改變Cube Color</span>
<ul>
<li>
<input type="radio" name="colorProvder" value="#FF0086" checked="true"/>桃紅
</li>
<li>
<input type="radio" name="colorProvder" value="#FFF400"/>翠黃
</li>
<li>
<input type="radio" name="colorProvder" value="#FFB100"/>桃紅
</li>
</ul>
</body>
</html>
結果：
Note：應用的style的名字不是合法的JavaScript變量命名。 如果你需要應用font-weight或者text-decoration，你不能直接使用，而是要使用style對應的JavaScript名稱。
錯誤：{font-weight: someValue};
正確：{fontWeight: someValue}
錯誤：{text-decoration: someValue};
正確：{textDecoration: someValue}
參考資料：style名稱與JavaScript 名稱對應列表。
