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狀態將只設置一次並且以後不在更新。

訂閱：文章 (Atom)

Ocean 學習筆記

2012年8月17日星期五

knockoutjs 13 css binding

knockoutjs 12 html binding

knockoutjs 11 text binding

knockoutjs 10 visible binding

常拜讀的Blog

關於我自己

2012年8月17日 星期五

knockoutjs 13 css binding

knockoutjs 12 html binding

knockoutjs 11 text binding

knockoutjs 10 visible binding

2012年8月17日星期五