[Javascript]knockout.js - 關於Html屬性的控制
在上一篇knockout.js初體驗有介紹用此框架來實作前端MVVM架構，延續這個主題，今天主要介紹控制常用Html屬性的幾個用法。
Visible Binding
在以往要控制Html標籤的顯示隱藏，我們可能需要在DOM的事件判斷將該標籤隱藏，如點選Checkbox，顯示某textarea。
CSS Binding
而CSS一樣可以加入一些邏輯判斷，套用不同的css，我們再將checkbox屬性打勾時(ShowTextarea)，套用一個.highlight css class
<h3 data-bind="css: { 'highlight': ShowTextarea }">Visible Binding</h3>
Style Binding
除了指定CSS外，也可使用Style來指定CSS屬性，方便的是可以做一些style的邏輯判斷，如我們判斷瀏覽器為Chome的話就加上底線的style
特別要注意的是，在CSS屬性有"-"符號，如text-Decoration在knockout.js需寫成textDecoration
Attr Binding
有寫過JQuery的人一定對attr不陌生，在attr() function，我們通常用來設置Html標籤的屬性值，如$('#hrefID’).attr(‘href’,'http:www.google.com.tw’)就是將ID為hrefID的href屬性改變為Google網址，而在Knockout.js，我們一樣可以用Binding的方式來實現，之所以把Attr放在最後介紹，因為是一個很彈性的function，像Jquery一樣，你可在Attr指定Visible、Disabled、Style等屬性。
完整程式碼
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-1.7.2.min.js"></script>
<script src="Scripts/knockout-2.1.0.debug.js"></script>
<script type="text/javascript">
//判斷是否為Chome瀏覽器
var IsChome = function () {
if (navigator.userAgent.indexOf('Chrome') != -1) {
return true;
}
return false;
};
var viewModel = function () {
//定義ShowTextarea，預設值為隱藏textarea
var self = this;
self.ShowTextarea = ko.observable(false);
self.AreaData = ko.observable("");
//定義<a></a>相關的ViewModel
self.HrefLink = ko.observable("http://www.google.com.tw");
self.HrefTitle = ko.observable("Google Now");
self.HrefText = ko.observable("Go to the Google");
self.HrefType = ko.observable("_blank");
//ViewModel增加確認瀏覽器
self.CheckBroser = ko.computed(function () {
return IsChome() ? 'underline' : '';
});
};
$(function () {
ko.applyBindings(new viewModel());
});
</script>
<style type="text/css">
.highlight {
color: blue;
}
</style>
</head>
<body>
<h3 data-bind="css: { 'highlight': ShowTextarea }" >Visible Binding</h3>
<!-- checked值改變時，去變更ViewModel的ShowTextarea true or false-->
<input type="checkbox" data-bind="checked: ShowTextarea" />顯示textarea
<br />
<!-- 繫結ViewModel的ShowTextarea來控制顯示或隱藏-->
<textarea rows="4" cols="50" data-bind="visible: ShowTextarea">
</textarea>
<h3 data-bind="style: { 'textDecoration': CheckBroser }" >Attr Binding</h3>
<!-- 繫結此<a></a>對應ViewModel的欄位，設置title屬性即時獲得變化 -->
Set Title :
<input type="text" data-bind="value: HrefTitle" /><br />
<a data-bind="text: HrefText, attr: { 'title': HrefTitle, 'href': HrefLink, 'target': HrefType }"></a>
</body>
</html>
--
Reference
http://knockoutjs.com/documentation/introduction.html
--
關聯文章