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代码走一遍就知道了。