Knockout.js随手记(8)

时间：2021-12-11 03:53:47

visible, disable, css绑定

　　这个例子非常简单，主要演示如何通过属性控制html元素的显示与否（visible），可用性（disable）以及根据属性添加相应的CSS样式。

先简单的看一段代码：

<p>

    <input id="isvip" type='checkbox' data-bind="checked: isVip" /><label for="isvip">是否是会员</label>

  </p>

   <p>

    你的用户名是:

    <input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"/>

    <span data-bind="visible: isVip">尊贵的会员欢迎你访问!</span>

   </p>

这段代码几乎不需要解释，非常的简单易懂，就是控制input元素的可用性，根据其中的文本添加样式，和控制隐藏元素的显示。

完整代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Test</title>

    <script src="~/Scripts/jquery-2.0.3.js"></script>

    <script src="~/Scripts/knockout-2.3.0.js"></script>

    <style type="text/css">

      .account {

             border-bottom-color:#0094ff;

             background-color:#b6ff00;

             border-bottom-width:2px;

        }

    </style>

</head>

<body>

   <p>

    <input id="isvip" type='checkbox' data-bind="checked: isVip" /><label for="isvip">是否是会员</label>

  </p>

   <p>

    你的用户名是:

    <input type='text' data-bind="value: username, enable: isVip,css: {account: username().indexOf('G')>-1}"/>

    <span data-bind="visible: isVip">尊贵的会员欢迎你访问!</span>

   </p>

    <script type="text/javascript">

        function ViewModel() {

            var self = this;

            self.isVip = ko.observable(false);

            self.username = ko.observable("halower@@");

        }

        $(function () {

            ko.applyBindings(new ViewModel());

        });

    </script>

</body>

</html>

运行效果

Knockout.js随手记(8)

备注：

    本文版权归大家共用，不归本人所有，所有知识都来自于官网支持，书本，国内外论坛，大牛分享等等......后续将学习knockout.js的常用功能。

                                如果你喜欢本文的话，推荐共勉，谢谢！

相关文章