visible绑定使用方法

作者: 前端技术  发布:2019-09-03

**轻巧的绑定

**首先依然先定义贰个ViewModel

复制代码 代码如下:

    var AppViewModel = {
        shouldShowMessage: ko.observable(true)  ///早先化的时候div是visible的    
    };

    AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒
    ko.applyBindings( AppViewModel);

同一时间通过ko.applyBindins实行激活Knockout。
接下来定义一个UI分界面成分

复制代码 代码如下:

<div data-bind="visible:shouldShowMessage">
    You will see this message only when "shouldShowMessage" holds a true value.
</div>

运营之后此div在最初化的时候照旧展现的能够,之后就被再度赋值为false,导致此div被埋伏掉了。
参数:
当参数设置为四个假值时(比如:布尔值false, 数字值0, 只怕null, 只怕undefined) ,该绑定将安装该因素的style.display值为none,让要素遮盖。它的优先级高于你在CSS里定义的别的display样式。
当参数设置为一个真值时(比如:布尔值true,恐怕非空non-null的目的大概数组) ,该绑定会删除该因素的style.display值,让要素可知。然后您在CSS里自定义的display样式将会活动生效。
一经参数是监察和控制属性observable的,那成分的visible状态将依据参数值的变动而改换,纵然不是,那成分的visible状态将只设置一回并且以往不在更新。
动用函数也许表明式来调节作而成分的可知性
您也能够利用JavaScript函数或许表达式作为参数。那样的话,函数或然表明式的结果将调控是还是不是出示/遮掩那个因素。举例:

复制代码 代码如下:

<script type="text/javascript">
    var AppViewModel = {
        shouldShowMessage: ko.observable(true),   ///开首化的时候div是visible的
        myValues: ko.observableArray([])        
    };

    AppViewModel.shouldShowMessage = ko.observable(false);   ///现在hidden勒
    AppViewModel.myValues.push("some value");                   ///向myValues数组中 增多四个项
    ko.applyBindings( AppViewModel);
</script>

在ViewModel中加多了二个myValues的属性值
同一时候给myValues的数组增多了二个项
与此同一时间在页面UI中绑定了贰个要素

复制代码 代码如下:

<div data-bind="visible: myValues().length > 0">   
  You will see this message only when 'myValues' has at least one member.
</div>

就好像此当增多完"some value"元素之后,myValues().length>0 则结果为true
那就是说此div就能显得出来。

首先依旧先定义一个ViewModel 复制代码 代码如下: var AppViewModel = { shouldShowMessage: ko.observable(true) ///伊始化的时候div是visible的 };...

本文由王中王开奖结果发布于前端技术,转载请注明出处:visible绑定使用方法

关键词:

上一篇:ie6下失效的来由深入分析及化解方法
下一篇:没有了