2012年8月24日 星期五

knockoutjs 15 attr binding

knockoutjs attr binding

Purpose (目的):
  • attr 綁定提供了一種方式可以設置DOM元素的任何屬性值。例如你可以設置<img>標籤src屬性或<a>標籤的href屬性。使用綁定,當ViewModel的屬性改變時,對應的UI會自動更新。

Example:

<!DOCTYPE html>
<head>
<title>Binding Attr Demo</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(){
    //create viewModel
    this.viewModel {
            url: ko.observable("http://tw.yahoo.com/"),
    details: ko.observable("Yahoo是一個入口網站")
};
ko.applyBindings(this.viewModel);
});
</script>
</head>
<body>
<!--title是滑鼠停在<a>Yahoo<a/>目標上面時,所出現的toolTip-->
<a data-bind="attr: { href: url, title: details }">Yahoo</a>
</body>

結果:







click Yahoo 會連結到  雅虎首頁
懸停在Yahoo上會出現toolTip

沒有留言:

張貼留言