Ocean 學習筆記: 2012年8月17日

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>

<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的屬性

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>

<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)

knockoutjs 12 html binding

knockoutjs html bind

<!DOCTYPE html>
<html>
<head>
<title>html 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>
<script>
$(document).ready(function(){
var myViewModel = {
//目前的price值
string:ko.observable('<div style="background-color:#00FF00;width:50px;height:50px"></div>'),
string2:ko.observable("<i>美國短毛貓</i>")
};

//啟動ko bind
ko.applyBindings(myViewModel);
});
</script>
</head>
<body>
<div data-bind="html: string"></div>
<div data-bind="html: string2"></div>
</body>
</html>

結果：

KO設置該值到元素的innerHTML屬性上，之前的內容將被覆蓋。
如果值是一個observable的，那元素的內容將根據數值的變化而更新，如果不是，那元素的內容將只設置一次並且以後不在更新。

如果你傳的不是Number或者String（例如一個Object或者Array），那顯示的內容將是yourProperty.toString()的內容。

note：因為該綁定設置元素的innerHTML，你應該注意不要使用不安全的HTML代碼，因為有可能引起腳本注入攻擊。如果你不確信是否安全（比如顯示用戶輸入的內容），那你應該使用text綁定，因為這個綁定只是設置元素的text 值innerText和textContent。

knockoutjs 11 text binding

knockoutjs text binding

使被text Binding的DOM元素，本文內容隨綁定的屬性值改變。 text Binding通常使用在<span>或<em>上，但技術上你可以用在任何元素上。

結果：
一開始span裡的內容會是Hello!，而當你改變下拉元件內容時，span的內容會隨之改變。

KO將值會設置在元素的innerText （IE）或textContent（Firefox和其它相似瀏覽器）屬性上。原來的文本將會被覆蓋。

如果值是observable的，那元素的text文本將根據參數值的變化而更新，如果不是，那元素的text文本將只設置一次並且以後不在更新。

如果你傳的是不是數字或者字符串（例如一個對像或者數組），那顯示的文本將是yourProperty.toString()的等價內容。

具有判斷處理式的選擇輸出：

<!DOCTYPE html>
<html>
<head>
<title>text 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>
<script>
$(document).ready(function(){
function ViewModel(){
//比較參考值
var referenceValue = 10;
//目前的price值
this.price = ko.observable(0);
//判斷處理式，用於當price變動時該如何呈現
this.priceRating = ko.computed(function(){
return this.price() > referenceValue ? " [Expensive] " : " [Affordable] ";
}, this);
}
//建立ViewModel的實體。
var myViewModel = new ViewModel();

//啟動ko bind
ko.applyBindings(myViewModel);

//下拉選單值變動時觸發。
$('#selectUI').change(function() {
//注意，這個值回來要轉成int
var newValue = parseInt(this.value);
myViewModel.price(newValue);
});
});
</script>
</head>
<body>
The item is <span data-bind="text: priceRating"></span> today.</br>
now Value：
<select id="selectUI">
<option>5</option>
<option>10</option>
<option>15</option>
</select>
</body>
</html>

也可以直接把判斷式宣告在tag上：

<!DOCTYPE html>
<html>
<head>
<title>text 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>
<script>
$(document).ready(function(){

var myViewModel = {
//目前的price值
price:ko.observable(0)
};

//啟動ko bind
ko.applyBindings(myViewModel);

//下拉選單值變動時觸發。
$('#selectUI').change(function() {
  //注意，這個值回來要轉成int
  var newValue = parseInt(this.value);
  myViewModel.price(newValue);
});
});
</script>
</head>
<body>
The item is <span data-bind="text: price() > 10 ? '[expensive]' : '[affordable]'"></span> today.</br>
now Value：
<select id="selectUI">
<option>5</option>
<option>10</option>
<option>15</option>
</select>
</body>
</html>

若你想輸出HTML tag則需要使用html bind，如果你使用text bind輸出html tag只會是一個string。

var myViewModel = {

string:ko.observable('<div style="background-color:#00FF00;width:50px;height:50px"></div>'),

string2:ko.observable("<i>美國短毛貓</i>")

};

//啟動ko bind

ko.applyBindings(myViewModel);

結果：(只是一段String)

<i>美國短毛貓</i>

knockoutjs 10 visible binding

knockoutjs visible binding

visible是藉由css來hide，實際上DOM的elements依然存在的。
hide是做了 display: none

<!DOCTYPE html>
<html>
<head>
<title>knockoutjs Visible 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>
<script>
$(document).ready(function(){
function ViewModel(visable){
this.shouldShowMessage = ko.observable(visable);
};

var myViewModel = new ViewModel(true);
ko.applyBindings(myViewModel);

$('#visableBtn').click(function(){
myViewModel.shouldShowMessage(true); // ... now it's visible again
});

$('#hiddenBtn').click(function(){
myViewModel.shouldShowMessage(false); // ... now it's hidden
});
});
</script>
</head>
<body>
<div data-bind="visible: shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
</p>
<div>
<input id="visableBtn" type="button" value="顯示文字"/>
<input id="hiddenBtn" type="button" value="隱藏文字"/>
</div>
</body>
</html>

使用google可以看到hide時：

<div data-bind="visible: shouldShowMessage" style="display: none; ">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

當值設置為一個False值時 –
(例如：布爾值false，數字值0，或者null，或者undefined） ,該綁定將設置該元素的style.display值為none，讓元素隱藏。它的優先級高於你在CSS裡定義的任何display樣式。

當值設置為一個True值時 -
（例如：布爾值true，或者非空non-null的對像或者數組） ,該綁定會刪除該元素的style.display值，讓元素可見。然後你在CSS裡自定義的display樣式將會自動生效。

如果值是監控屬性observable的，那元素的visible狀態將根據參數值的變化而變化，如果不是，那元素的visible狀態將只設置一次並且以後不在更新。

2012年8月17日 星期五

knockoutjs 13 css binding

knockoutjs 12 html binding

knockoutjs 11 text binding

knockoutjs 10 visible binding

2012年8月17日星期五