Knockout visible綁定使用方法
更新時(shí)間:2013年11月15日 09:43:04 作者:
本文講解Knockout讓visible綁定到DOM元素上,使得該元素的hidden或visible取決于綁定的值,下面有代碼參考
簡單的綁定
首先還是先定義一個(gè)ViewModel
var AppViewModel = {
shouldShowMessage: ko.observable(true) ///初始化的時(shí)候div是visible的
};
AppViewModel.shouldShowMessage = ko.observable(false); ///現(xiàn)在hidden勒
ko.applyBindings( AppViewModel);
并且通過ko.applyBindins進(jìn)行激活Knockout。
然后定義一個(gè)UI界面元素
<div data-bind="visible:shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
運(yùn)行之后此div在初始化的時(shí)候還是顯示的可以,之后就被重新賦值為false,導(dǎo)致此div被隱藏掉了。
參數(shù):
當(dāng)參數(shù)設(shè)置為一個(gè)假值時(shí)(例如:布爾值false, 數(shù)字值0, 或者null, 或者undefined) ,該綁定將設(shè)置該元素的style.display值為none,讓元素隱藏。它的優(yōu)先級(jí)高于你在CSS里定義的任何display樣式。
當(dāng)參數(shù)設(shè)置為一個(gè)真值時(shí)(例如:布爾值true,或者非空non-null的對象或者數(shù)組) ,該綁定會(huì)刪除該元素的style.display值,讓元素可見。然后你在CSS里自定義的display樣式將會(huì)自動(dòng)生效。
如果參數(shù)是監(jiān)控屬性observable的,那元素的visible狀態(tài)將根據(jù)參數(shù)值的變化而變化,如果不是,那元素的visible狀態(tài)將只設(shè)置一次并且以后不在更新。
使用函數(shù)或者表達(dá)式來控制元素的可見性
你也可以使用JavaScript函數(shù)或者表達(dá)式作為參數(shù)。這樣的話,函數(shù)或者表達(dá)式的結(jié)果將決定是否顯示/隱藏這個(gè)元素。例如:
<script type="text/javascript">
var AppViewModel = {
shouldShowMessage: ko.observable(true), ///初始化的時(shí)候div是visible的
myValues: ko.observableArray([])
};
AppViewModel.shouldShowMessage = ko.observable(false); ///現(xiàn)在hidden勒
AppViewModel.myValues.push("some value"); ///向myValues數(shù)組中 添加一個(gè)項(xiàng)
ko.applyBindings( AppViewModel);
</script>
在ViewModel中添加了一個(gè)myValues的屬性值
同時(shí)給myValues的數(shù)組添加了一個(gè)項(xiàng)
并且在頁面UI中綁定了一個(gè)元素
<div data-bind="visible: myValues().length > 0">
You will see this message only when 'myValues' has at least one member.
</div>
就這樣當(dāng)添加完"some value"元素之后,myValues().length>0 則結(jié)果為true
那么此div就會(huì)顯示出來。
首先還是先定義一個(gè)ViewModel
復(fù)制代碼 代碼如下:
var AppViewModel = {
shouldShowMessage: ko.observable(true) ///初始化的時(shí)候div是visible的
};
AppViewModel.shouldShowMessage = ko.observable(false); ///現(xiàn)在hidden勒
ko.applyBindings( AppViewModel);
并且通過ko.applyBindins進(jìn)行激活Knockout。
然后定義一個(gè)UI界面元素
復(fù)制代碼 代碼如下:
<div data-bind="visible:shouldShowMessage">
You will see this message only when "shouldShowMessage" holds a true value.
</div>
運(yùn)行之后此div在初始化的時(shí)候還是顯示的可以,之后就被重新賦值為false,導(dǎo)致此div被隱藏掉了。
參數(shù):
當(dāng)參數(shù)設(shè)置為一個(gè)假值時(shí)(例如:布爾值false, 數(shù)字值0, 或者null, 或者undefined) ,該綁定將設(shè)置該元素的style.display值為none,讓元素隱藏。它的優(yōu)先級(jí)高于你在CSS里定義的任何display樣式。
當(dāng)參數(shù)設(shè)置為一個(gè)真值時(shí)(例如:布爾值true,或者非空non-null的對象或者數(shù)組) ,該綁定會(huì)刪除該元素的style.display值,讓元素可見。然后你在CSS里自定義的display樣式將會(huì)自動(dòng)生效。
如果參數(shù)是監(jiān)控屬性observable的,那元素的visible狀態(tài)將根據(jù)參數(shù)值的變化而變化,如果不是,那元素的visible狀態(tài)將只設(shè)置一次并且以后不在更新。
使用函數(shù)或者表達(dá)式來控制元素的可見性
你也可以使用JavaScript函數(shù)或者表達(dá)式作為參數(shù)。這樣的話,函數(shù)或者表達(dá)式的結(jié)果將決定是否顯示/隱藏這個(gè)元素。例如:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var AppViewModel = {
shouldShowMessage: ko.observable(true), ///初始化的時(shí)候div是visible的
myValues: ko.observableArray([])
};
AppViewModel.shouldShowMessage = ko.observable(false); ///現(xiàn)在hidden勒
AppViewModel.myValues.push("some value"); ///向myValues數(shù)組中 添加一個(gè)項(xiàng)
ko.applyBindings( AppViewModel);
</script>
在ViewModel中添加了一個(gè)myValues的屬性值
同時(shí)給myValues的數(shù)組添加了一個(gè)項(xiàng)
并且在頁面UI中綁定了一個(gè)元素
復(fù)制代碼 代碼如下:
<div data-bind="visible: myValues().length > 0">
You will see this message only when 'myValues' has at least one member.
</div>
就這樣當(dāng)添加完"some value"元素之后,myValues().length>0 則結(jié)果為true
那么此div就會(huì)顯示出來。
您可能感興趣的文章:
- Knockoutjs 學(xué)習(xí)系列(二)花式捆綁
- Knockoutjs 學(xué)習(xí)系列(一)ko初體驗(yàn)
- BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【二】
- BootstrapTable與KnockoutJS相結(jié)合實(shí)現(xiàn)增刪改查功能【一】
- Knockout text綁定DOM的使用方法
- Knockout數(shù)組(observable)使用詳解示例
- Knockoutjs快速入門(經(jīng)典)
- Knockoutjs的環(huán)境搭建教程
- ko knockoutjs動(dòng)態(tài)屬性綁定技巧應(yīng)用
- 用Javascript評(píng)估用戶輸入密碼的強(qiáng)度(Knockout版)
- 深入淺析knockout源碼分析之訂閱
相關(guān)文章
javascript對話框使用方法(警告框 javascript確認(rèn)框 提示框)
javascript對話框使用方法,有警告框、確認(rèn)框、提示框的使用方法和語法,大家參考使用吧2014-01-01
Javascript技術(shù)棧中的四種依賴注入小結(jié)
本文總結(jié)了Javascript中常見的依賴注入方式,并以inversify.js為例,介紹了方言社區(qū)對于Javascript中DI框架的嘗試和初步成果2016-02-02
Javascript基礎(chǔ)_簡單比較undefined和null 值
下面小編就為大家?guī)硪黄狫avascript基礎(chǔ)_簡單比較undefined和null 值。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
解析js如何獲取當(dāng)前url中的參數(shù)值并復(fù)制給input
本篇文章是對js獲取當(dāng)前url中的參數(shù)值并復(fù)制給input的方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下2013-06-06

