[Javascript]knockout.js - 關於Html屬性的控制 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 17

ASP.NET Web技術小技巧分享系列第 14 篇

[Javascript]knockout.js - 關於Html屬性的控制

javascript 程式設計 jquery 鐵人賽 web html5

Kyle Shen

2013-10-02 08:34:41

8319 瀏覽

分享至

在上一篇knockout.js初體驗有介紹用此框架來實作前端MVVM架構，延續這個主題，今天主要介紹控制常用Html屬性的幾個用法。
http://ithelp.ithome.com.tw/question/10132092
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等屬性。

完整程式碼

<html xmlns="http://www.w3.org/1999/xhtml">

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


    <h3 data-bind="css: { 'highlight': ShowTextarea }" >Visible Binding</h3>
    <!-- checked值改變時，去變更ViewModel的ShowTextarea true or false-->
    <input type="checkbox" data-bind="checked: ShowTextarea" />顯示textarea
     
 
    <!-- 繫結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" />
 
    <a data-bind="text: HrefText, attr: { 'title': HrefTitle, 'href': HrefLink, 'target': HrefType }"></a>