## 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，否則就隱藏。