Knockout學習之文本和外觀綁定器

文本和外觀綁定器

 

“visible”綁定

該綁定主要用來讓我們通過監控屬性可以控制html文檔的顯示，只要綁定的監控屬性為false、0、null或者undefined則隱藏該標簽，否則顯示。比如下面的示例：

<span data-bind="visible:visibleState">顯示了</span>
<div>
    <button type="button" data-bind="click:show">出現吧，我的皮卡丘</button>
    <button type="button" data-bind="click:hide">滾粗吧，你！</button>
</div>


    <script type="text/javascript">

        var appViewModel = function () {
            this.visibleState = ko.observable(false);
            this.show = function () {
                this.visibleState(true);
            };
            this.hide = function () {
                this.visibleState(false);
            }
        }

        ko.applyBindings(new appViewModel());
</script>

 

 

默認是不顯示的，當點擊出現按鈕設置visibleState的值為true，因為ko會自動更新。所以對應的標簽也就顯示了，相反我們點擊另一個按鈕，則標簽消失。這僅僅只是通過監控屬性來控制，我們也可以使用表達式，我們將上面的代碼改寫：

<span data-bind="visible:visibleState() == true">顯示了</span>

 

 

我們直接在data-bind中寫了判斷語句，當然這是可以的。最后效果還是跟之前的一樣。

 

“text”綁定

前面我們一直在使用這個綁定，所以這里筆者就不把那些重復的東西繼續介紹了，直接介紹我們沒有使用過的語法，在前面的使用過程中我們一直都是直接將監控屬性顯示到對應標簽中，其實我們可以在標簽文本的指定位置顯示，比如下面的代碼：

<ul data-bind="foreach:datalist" >
    <li>value<!--ko text:value--><!--/ko--></li>
</ul>


    <script type="text/javascript">

        var appViewModel = function () {
            this.datalist = ko.observableArray([{ "value": 1 }, { "value": 2 }, { "value": 3 }]);
        }

        ko.applyBindings(new appViewModel());
    </script>

 

 

我們將可以看到如下的結果：

 

“html”綁定

其實這個綁定跟text差不多，都是設置標簽的內容，但是如果我們的監控屬性中存在標簽，則就存在意義了，因為text會將我們的標簽轉義輸出，而html則不會，比如下面的示例：

<div data-bind="html: htmlText" >

</div>


    <script type="text/javascript">

        var appViewModel = function () {
            this.htmlText = ko.observable("<h1>哈哈，我們又見面了</h1>");
        }

        ko.applyBindings(new appViewModel());
</script>

 

 

最終的效果圖如下所示：

 

“css”綁定

其實這個屬性一開始我會認為可以設置style，其實不相干，它只是用來控制class使用哪些樣式的，第一種方式是直接通過監控屬性賦樣式，比如下面這種方式：

<style type="text/css">
    .test1 {
        background-color: red;
    }

    .test2 {
        background-color: green;
    }
</style>

<div data-bind="css: cssName">
    我會變色
</div>
<div>
    <button type="button" data-bind="click: changeTest1">我變</button>
    <button type="button" data-bind="click: changeTest2">我再變</button>
</div>


    <script type="text/javascript">

        var appViewModel = function () {
            this.cssName = ko.observable("");
            this.changeTest1 = function () {
                this.cssName("test1");
            };
            this.changeTest2 = function () {
                this.cssName("test2");
            };
        }

        ko.applyBindings(new appViewModel());
</script>

 

 

一開始默認是沒有顏色的，當我們點擊不同的按鈕后可以看到這個div會切換不同的背景色，這些都是通過ko來實現的，當然我們也可以不用這種方式，而是通過表達式去控制，比如下面這種方式：

<div data-bind="css:{ test1:cssName() == 'test1',test2:cssName() == 'test2'}">
    我會變色
</div>

 

 

雖然換成了表達式的形式，但是最終的效果跟上面的是完全一樣的，讀者可以根據自己的實際情況來選擇。

 

“style”綁定

這個屬性必須是控制style的了，這里我們將上面的示例改寫：

<div data-bind="style: { backgroundColor: cssName() }">
    我會變色
</div>
<div>
    <button type="button" data-bind="click: changeTest1">我變</button>
    <button type="button" data-bind="click: changeTest2">我再變</button>
</div>


    <script type="text/javascript">

        var appViewModel = function () {
            this.cssName = ko.observable("");
            this.changeTest1 = function () {
                this.cssName("red");
            };
            this.changeTest2 = function () {
                this.cssName("green");
            };
        }

        ko.applyBindings(new appViewModel());
</script>

 

 

“attr”綁定

有了這個就可以盡情的修改標簽中的任何屬性了，筆者再次就舉一個關於切換a標簽的href值，代碼如下：

<a data-bind="attr:{href:doHref}">快點我</a>
<div>
    <button type="button" data-bind="click:changeTest1">換地址1</button>
    <button type="button" data-bind="click:changeTest2">換地址2</button>
</div>


    <script type="text/javascript">

        var appViewModel = function () {
            this.doHref = ko.observable("");
            this.changeTest1 = function () {
                this.doHref("http://www.baidu.com");
            };
            this.changeTest2 = function () {
                this.doHref("http://www.cnblogs.com/");
            };
        }

        ko.applyBindings(new appViewModel());
    </script>

 

 

具體效果，copy代碼走一遍就知道了。