[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>