<!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。
沒有留言:
張貼留言