Knockout.js随手记(8)_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > Knockout.js随手记(8)

Knockout.js随手记(8)

 2013/7/31 23:08:47  Halower  博客园  我要评论(0)
  • 摘要:visible,disable,css绑定这个例子非常简单,主要演示如何通过属性控制html元素的显示与否(visible),可用性(disable)以及根据属性添加相应的CSS样式。先简单的看一段代码:<p><inputid="isvip"type='checkbox'data-bind="checked:isVip"/><labelfor="isvip">是否是会员</label></p><p>你的用户名是:<
  • 标签:JS

class="entryviewheading">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的常用功能。

                                如果你喜欢本文的话,推荐共勉,谢谢!

发表评论
用户名: 匿名