WeX5数据绑定02：visible绑定

visible绑定(bind-visible)可以绑定可监控对象来动态控制元素是否在页面中显示。bind-visible也可以绑定复杂的表达式来控制元素是否显示。

基本使用

html源码

  <div bind-visible="shouldShowMessage">
	 当"shouldShowMessage"为 true时，才能看到这段消息
  </div>
  <button component="$UI/system/components/justep/button/button"
  	class="btn btn-warning"
  	bind-click="buttonClick">点我切换
  </button>

js源码

	var Model = function(){
		this.callParent();
		this.shouldShowMessage = justep.Bind.observable(true);
	};

	Model.prototype.buttonClick = function(event){
       this.shouldShowMessage.set(!this.shouldShowMessage.get());
	};

这段代码展示了bind-visible的用法。将上述代码贴到页面运行起来，点击按钮可切换文字的显示和隐藏。

visible绑定规则：通过绑定元素的style.display来控制元素显示。当绑定对象的值为true、不为空的对象、数组的时候，元素的style.display样式会被移除，从而使元素显示；当参数为false、null、undefined、 数字0、空字符串的时候，将会为元素添加样式style.display:none，从而将元素隐藏。

如果绑定的是监视属性，那么当属性改变的时候界面也会发生改变。

visible绑定表达式

还可以为visible绑定表达式，例如：

js源码

	var Model = function(){
		this.callParent();
        this.myValues = justep.Bind.observableArray([]);
	};

	Model.prototype.buttonClick = function(event){
		if(this.myValues.get().length > 0){
			this.myValues.removeAll();
		}
		else{
			this.myValues.push('some value');
		}
	};

上面js代码创建了一个可监控数组对象。buttonClick事件根据可监控数组对象的长度来执行清空数组或向数组增加一项。关于可监控数组对象后面文章会详细介绍。

html源码

  <div bind-visible="myValues.get().length > 0">
	 当"myValues"数组值得长度大于0，才能看到这段消息
  </div>
  <button component="$UI/system/components/justep/button/button"
  	class="btn btn-warning"
  	bind-click="buttonClick">点我切换
  </button>

在上面的代码中，visible绑定的是一个表达式。当myValues的长度发生变化时，visible会被重新计算并设置。

bind-visible=”myValues.get().length > 0″ 这个绑定表示如果myValues的长度大于0，就显示元素div，否则就隐藏。