首頁 > web前端 > js教程 > Knockout visible綁定使用方法_基礎知識

Knockout visible綁定使用方法_基礎知識

WBOY
發布: 2016-05-16 17:15:06
原創
1249 人瀏覽過
簡單的綁定

首先還是先定義一個ViewModel
複製程式碼



複製程式碼



複製程式碼



複製程式碼
程式碼如下:    var AppViewModel = {        shouldShowMessage: ko.observable(true)  AppViewModel.shouldShowMessage = ko.observable(false);   ///現在hidden勒    ko.applyBindings( AppViewModel);


並且透過ko.applyBindins進行啟用Knockout。
然後定義一個UI介面元素



複製程式碼


程式碼如下:

此運行時候還是顯示的可以,之後就被重新賦值為false,導致此div被隱藏掉了。
參數:
當參數設定為一個假值時(例如:布林值false,數字值0, 或null, 或undefined) ,此綁定將設定該元素的style.display值為none,讓元素隱藏。它的優先權高於你在CSS裡定義的任何display樣式。
當參數設定為一個真值時(例如:布林值true,或非空non-null的物件或陣列) ,該綁定會刪除該元素的style.display值,讓元素可見。然後你在CSS裡自訂的display樣式將會自動生效。
如果參數是監控屬性observable的,那麼元素的visible狀態將根據參數值的變化而變化,如果不是,那麼元素的visible狀態只會設定一次且以後不在更新。
使用函數或表達式來控制元素的可見性
你也可以使用JavaScript函數或表達式作為參數。這樣的話,函數或表達式的結果將決定是否顯示/隱藏這個元素。例如:




複製程式碼


程式碼如下:

    ko.applyBindings ( AppViewModel);



在ViewModel中加入了一個myValues的屬性值
同時為myValues的陣列新增了一個項目
並且在頁面UI中綁定了一個元素

複製程式碼 程式碼如下:
      You will see this message only when 'myValues' has at least one member.
就這樣添加🎜>0 則結果為true 那麼此div就會顯示出來。
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板