- 使被text Binding的DOM元素，本文內容隨綁定的屬性值改變。 text Binding通常使用在<span>或<em>上，但技術上你可以用在任何元素上。
<!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(value){
this.myMessage = ko.observable(value);
}
var myViewModel = new ViewModel("Hello!");
//啟動bind
ko.applyBindings(myViewModel);
//JQuery 事件，當下拉元件被改變時觸發。
$('#selectUI').change(function() {
myViewModel.myMessage(this.value);
});
});
</script>
</head>
<body>
<span data-bind="text: myMessage"></span>
<select id="selectUI">
<option>台北</option>
<option>彰化</option>
<option>台南</option>
</select>
</body>
</html>
結果：
一開始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);
<div data-bind="text: string"></div>
<div data-bind="text: string2"></div>
結果：(只是一段String)
<div style="background-color:#00FF00;width:50px;height:50px"></div>
<i>美國短毛貓</i>
沒有留言:
張貼留言