小虾虎鱼

小虾虎鱼

Knockoutjs的控制元素的显示与隐藏方法:visible

作者 禾惠 发表于 2015/04/28,最后修改于 2015/04/28

visible从单词的意思来看就是可见的,我们就可以很容易理解为visible是控制DOM元素的可见性,通过样式display:none来隐藏元素。 visible接受的参数为布尔值,非布尔值会自动转换成布尔值。下面介绍一下visible常见的使用场景:

第一种:直接将值放在元素上(这种使用方法没有任何意义)

<div data-bind="visible:false">小虾虎鱼</div>
ko.applyBindings({});

如果将上面的写法改进一下,如:

<div data-bind="visible:list().length>0">小虾虎鱼</div>
var viewmodel = {
        list:ko.observableArray()
};
ko.applyBindings(viewmodel);

如果数组list长度大于0则显示,否则不显示。这种使用方法在开发中还是很有用处的。

第二种:将值放在模型里面

<div data-bind="visible:visible">小虾虎鱼</div>
var viewmodel = {
        visible:ko.observable(false)
}
ko.applyBindings(viewmodel);

如果我们也将上面的方法改进一下,做成点击按钮控制其显示隐藏的效果:

<div><button data-bind="click:show">显示/隐藏</button></div>
<div data-bind="visible:false">小虾虎鱼</div>
var viewmodel = {
    visible:ko.observable(false),
    show:function(){
        this.visible(!this.visible());
    }
};
ko.applyBindings(viewmodel);

使用visible还可以做出tab效果,如:

<div>
    <button data-bind="click:show.bind($data,1)">按钮1</button>
    <button data-bind="click:show.bind($data,2)">按钮3</button>
    <button data-bind="click:show.bind($data,3)">按钮3</button>
</div>
<div data-bind="visible:visible()===1">内容1</div>
<div data-bind="visible:visible()===2">内容2</div>
<div data-bind="visible:visible()===3">内容3</div>
var vm = {
    visible:ko.observable(1),
    show:function(index){
        this.visible(index);
    }
};
ko.applyBindings(vm);

当然,visible能实现的效果不止这些,我们只需要理解:visible就是用来控制DOM元素的显示与隐藏。