iT邦幫忙

DAY 17
6

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

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

在上一篇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>
    

上一篇
[Javascript]knockout.js-初體驗
下一篇
[Javascript]knockout.js - 事件處理
系列文
ASP.NET Web技術小技巧分享27

尚未有邦友留言

立即登入留言