2012年8月17日 星期五

knockoutjs 13 css binding

knockoutjs css binding
<!DOCTYPE html>
<html>
<head>
<title>css bind</title>
<meta charset="UTF-8"/>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<style>
.profitWarning{
/*桃紅色*/
color: #D83670;
}
</style>
<script>
$(document).ready(function(){
    this.viewModel = {
        currentProfit: ko.observable(150000)
    };
    this.viewModel.currentProfit(-50);    
ko.applyBindings(this.viewModel);
    });
</script>
</head>
<body>
<!--如果currentProfit 大於 0 就套上   .profitWarning的內容-->
<div data-bind= "css: { profitWarning: currentProfit() < 0 }">
   Profit Information
</div>
</body>
</html>

  • css綁定是添加或刪除一個或多個CSS class到DOM元素上。非常有用，比如當數​​字變成負數時高亮顯示。 （注：如果你不想應用CSS class而是想引用style屬性的話，請參考style綁定。）
  • 該參數是一個JavaScript對象，屬性是你的CSS class名稱，值是比較用的true或false，用來決定是否應該使用這個CSS class。
  • 你可以一次設置多個CSS class。例如，如果你的view model有一個叫isServre的屬性


<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">


example：
<!DOCTYPE html>
<html>
<head>
<title>CSS Binding</title>
<meta charset="UTF-8"/>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.1.0.js"></script>
<style>
li{
   list-style: none;
}

.profitWarning{
   color: #DD6611;
}

.goodPanel{
   background-color: #43577B;
}
</style>
<script>
$(document).ready(function(){

var viewModel;
function CSSModel(visable , panelVisable){
this.currentProfit = ko.observable(visable);
this.currentPanel = ko.observable(panelVisable);
}

viewModel = new CSSModel(1 ,true);
ko.applyBindings(viewModel  , document.getElementById('boxA'));

$("#colorCtrl").change(function(){
viewModel.currentProfit((arguments[0].currentTarget.checked == true)? 1 : -1 );
});

$("#panelCtrl").change(function(){
viewModel.currentPanel((arguments[0].currentTarget.checked == true)? true : false );
});
});
</script>
</head>
<body>
<!--如果currentProfit 大於 0 就套上   .profitWarning的內容-->
<div  id="boxA">
<div data-bind= "css: {profitWarning: currentProfit() > 0 , goodPanel:currentPanel }">
  Profit Information
</div>
</br>
<div data-bind= "css: {profitWarning: currentProfit() > 0 , goodPanel:currentPanel }">
  Profit Information 2
</div>
</div>

<ul>
<li>
<input type="checkbox"  id="colorCtrl" checked="true">
<span style="margin-right: 20px">Font Color</span>
</li>
<li>
<input type="checkbox"  id="panelCtrl" checked="true">
<span style="margin-right: 20px">Panel Color</span>
</li>
</ul>
</body>
</html>


非boolean會被解析成boolean 。例如， 0和null被解析成false，21和non null對像被解析成true。 如果參數是observable的，那隨著值的變化將會自動添加或者刪除該元素上的CSS class。如果不是，那CSS class將會只添加或者刪除一次並且以後不在更新。 你可以使用任何JavaScript表達式或函數作為參數。 KO將用它的執行結果來決定是否應用或刪除CSS class。

Note :
應用的CSS class的名字不是合法的JavaScript變量命名， 如果你想使用my-class class，你不能寫成這樣：
<div data-bind="css: { my-class: someValue }">...</div>   //不合法 (NO)

 因為my-class不是一個合法的命名。解決方案是：在my-class兩邊加引號作為一個字符串使用。
這是一個合法的JavaScript 對象文字（從JSON技術規格說明來說，你任何時候都應該這樣使用，雖然
不是必須的）。例如：
<div data-bind="css: { ‘my-class’: someValue }">...</div>  //合法 (OK)



於

沒有留言:

張貼留言