Knockout visible綁定使用方法
更新時(shí)間：2013年11月15日 09:43:04 作者：
本文講解Knockout讓visible綁定到DOM元素上，使得該元素的hidden或visible取決于綁定的值,下面有代碼參考
簡(jiǎn)單的綁定
首先還是先定義一個(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的對(duì)象或者數(shù)組） ,該綁定會(huì)刪除該元素的style.display值，讓元素可見。然后你在CSS里自定義的display樣式將會(huì)自動(dòng)生效。
如果參數(shù)是監(jiān)控屬性observable的，那元素的visible狀態(tài)將根據(jù)參數(shù)值的變化而變化，如果不是，那元素的visible狀態(tài)將只設(shè)置一次并且以后不在更新。
使用函數(shù)或者表達(dá)式來(lái)控制元素的可見性
你也可以使用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)
并且在頁(yè)面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ì)顯示出來(lái)。
首先還是先定義一個(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的對(duì)象或者數(shù)組） ,該綁定會(huì)刪除該元素的style.display值，讓元素可見。然后你在CSS里自定義的display樣式將會(huì)自動(dòng)生效。
如果參數(shù)是監(jiān)控屬性observable的，那元素的visible狀態(tài)將根據(jù)參數(shù)值的變化而變化，如果不是，那元素的visible狀態(tài)將只設(shè)置一次并且以后不在更新。
使用函數(shù)或者表達(dá)式來(lái)控制元素的可見性
你也可以使用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)
并且在頁(yè)面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ì)顯示出來(lái)。
您可能感興趣的文章:
- 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編程語(yǔ)言的編碼規(guī)范
本文淺談 JavaScript 編程中關(guān)于編碼規(guī)范的問題，分析其中緣由。希望引起更多 Web 開發(fā)人員對(duì) JavaScript 編碼規(guī)范問題的關(guān)注和對(duì)軟件產(chǎn)品質(zhì)量問題的重視2011-10-10
javascript對(duì)話框使用方法(警告框 javascript確認(rèn)框 提示框)
javascript對(duì)話框使用方法,有警告框、確認(rèn)框、提示框的使用方法和語(yǔ)法，大家參考使用吧2014-01-01
JavaScript中Math對(duì)象方法如向上取整,有小數(shù)就整數(shù)部分加1，四舍五入、向下取整等等，下面為大家詳細(xì)介紹下2014-01-01
本文詳細(xì)講解了ECMAScript6的基礎(chǔ)教程，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Javascript技術(shù)棧中的四種依賴注入小結(jié)
本文總結(jié)了Javascript中常見的依賴注入方式，并以inversify.js為例，介紹了方言社區(qū)對(duì)于Javascript中DI框架的嘗試和初步成果2016-02-02
Javascript基礎(chǔ)_簡(jiǎn)單比較undefined和null 值
下面小編就為大家?guī)?lái)一篇Javascript基礎(chǔ)_簡(jiǎn)單比較undefined和null 值。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06
JavaScript 學(xué)習(xí)筆記一些小技巧，大家可以參考下，比較實(shí)用的知識(shí)。2010-03-03
JavaScript 無(wú)符號(hào)右移運(yùn)算符
無(wú)符號(hào)右移運(yùn)算符 (>>>)是右移表達(dá)式的位，不保留符號(hào)。2009-04-04
JavaScript中的Navigator瀏覽器對(duì)象
2008-01-01
解析js如何獲取當(dāng)前url中的參數(shù)值并復(fù)制給input
本篇文章是對(duì)js獲取當(dāng)前url中的參數(shù)值并復(fù)制給input的方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-06-06