新聞中心
1 visible 綁定
目的

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司,自成立以來公司不斷探索創(chuàng)新,始終堅(jiān)持為客戶提供滿意周到的服務(wù),在本地打下了良好的口碑,在過去的十年時間我們累計(jì)服務(wù)了上千家以及全國政企客戶,如成都房屋鑒定等企業(yè)單位,完善的項(xiàng)目管理流程,嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過硬的技術(shù)實(shí)力獲得客戶的一致稱譽(yù)。
visible綁定到DOM元素上,使得該元素的hidden或visible狀態(tài)取決于綁定的值。
例子
You will see this message only when "shouldShowMessage" holds a true value.
參數(shù)
主參數(shù)
當(dāng)參數(shù)設(shè)置為一個假值時(例如:布爾值false, 數(shù)字值0, 或者null, 或者undefined) ,該綁定將設(shè)置該元素的style.display值為none,讓元素隱藏。它的優(yōu)先級高于你在CSS里定義的任何display樣式。
當(dāng)參數(shù)設(shè)置為一個真值時(例如:布爾值true,或者非空non-null的對象或者數(shù)組) ,該綁定會刪除該元素的style.display值,讓元素可見。然后你在CSS里自定義的display樣式將會自動生效。
如果參數(shù)是監(jiān)控屬性observable的,那元素的visible狀態(tài)將根據(jù)參數(shù)值的變化而變化,如果不是,那元素的visible狀態(tài)將只設(shè)置一次并且以后不在更新。
其它參數(shù)
無
注:使用函數(shù)或者表達(dá)式來控制元素的可見性
你也可以使用JavaScript函數(shù)或者表達(dá)式作為參數(shù)。這樣的話,函數(shù)或者表達(dá)式的結(jié)果將決定是否顯示/隱藏這個元素。例如:
You will see this message only when 'myValues' has at least one member.
依賴性
除KO核心類庫外,無依賴。
2 text 綁定
目的
text 綁定到DOM元素上,使得該元素顯示的文本值為你綁定的參數(shù)。該綁定在顯示或者上非常有用,但是你可以用在任何元素上。
例子
Today's message is:
參數(shù)
主參數(shù)
KO將參數(shù)值會設(shè)置在元素的innerText (IE)或textContent(Firefox和其它相似瀏覽器)屬性上。原來的文本將會被覆蓋。
如果參數(shù)是監(jiān)控屬性observable的,那元素的text文本將根據(jù)參數(shù)值的變化而更新,如果不是,那元素的text文本將只設(shè)置一次并且以后不在更新。
如果你傳的是不是數(shù)字或者字符串(例如一個對象或者數(shù)組),那顯示的文本將是yourParameter.toString()的等價內(nèi)容。
其它參數(shù)
無
注1:使用函數(shù)或者表達(dá)式來決定text值
如果你想讓你的text更可控,那選擇是創(chuàng)建一個依賴監(jiān)控屬性(dependent observable),然后在它的執(zhí)行函數(shù)里編碼,決定應(yīng)該顯示什么樣的text文本。
例如:
The item is today.
現(xiàn)在,text文本將在“expensive”和“affordable”之間替換,取決于價格怎么改變。
然而,如果有類似需求的話其實(shí)沒有必要再聲明一個依賴監(jiān)控屬性(dependent observable), 你只需要按照如下代碼寫JavaScript表達(dá)式就可以了:
The item is today.結(jié)果是一樣的,但我們不需要再聲明依賴監(jiān)控屬性(dependent observable)。
注2:關(guān)于HTML encoding
因?yàn)樵摻壎ㄊ窃O(shè)置元素的innerText或textContent (而不是innerHTML),所以它是安全的,沒有HTML或者腳本注入的風(fēng)險(xiǎn)。例如:如果你編寫如下代碼:
viewModel.myMessage("Hello, world!");… 它不會顯示斜體字,而是原樣輸出標(biāo)簽。如果你需要顯示HTML內(nèi)容,請參考html綁定.
注3:關(guān)于IE 6的白空格whitespace
IE6有個奇怪的問題,如果 span里有空格的話,它將自動變成一個空的span。如果你想編寫如下的代碼的話,那Knockout將不起任何作用:
Welcome, to our web site.… IE6 將不會顯示span中間的那個空格,你可以通過下面這樣的代碼避免這個問題:
Welcome, to our web site.IE6以后版本和其它瀏覽器都沒有這個問題
依賴性
除KO核心類庫外,無依賴。
3 html 綁定
目的
html綁定到DOM元素上,使得該元素顯示的HTML值為你綁定的參數(shù)。如果在你的view model里聲明HTML標(biāo)記并且render的話,那非常有用。
例子
參數(shù)
主參數(shù)
KO設(shè)置該參數(shù)值到元素的innerHTML屬性上,元素之前的內(nèi)容將被覆蓋。
如果參數(shù)是監(jiān)控屬性observable的,那元素的內(nèi)容將根據(jù)參數(shù)值的變化而更新,如果不是,那元素的內(nèi)容將只設(shè)置一次并且以后不在更新。
如果你傳的是不是數(shù)字或者字符串(例如一個對象或者數(shù)組),那顯示的文本將是yourParameter.toString()的等價內(nèi)容。
其它參數(shù)
無
注:關(guān)于HTML encoding
因?yàn)樵摻壎ㄔO(shè)置元素的innerHTML,你應(yīng)該注意不要使用不安全的HTML代碼,因?yàn)橛锌赡芤鹉_本注入攻擊。如果你不確信是否安全(比如顯示用戶輸入的內(nèi)容),那你應(yīng)該使用text綁定,因?yàn)檫@個綁定只是設(shè)置元素的text 值innerText和textContent。
依賴性
除KO核心類庫外,無依賴。
4 css 綁定
目的
css綁定是添加或刪除一個或多個CSS class到DOM元素上。 非常有用,比如當(dāng)數(shù)字變成負(fù)數(shù)時高亮顯示。(注:如果你不想應(yīng)用CSS class而是想引用style屬性的話,請參考style綁定。)
例子
Profit Information
效果就是當(dāng)currentProfit 小于0的時候,添加profitWarning CSS class到元素上,如果大于0則刪除這個CSS class。
參數(shù)
主參數(shù)
該參數(shù)是一個JavaScript對象,屬性是你的CSS class名稱,值是比較用的true或false,用來決定是否應(yīng)該使用這個CSS class。
你可以一次設(shè)置多個CSS class。例如,如果你的view model有一個叫isServre的屬性,
非布爾值會被解析成布爾值。例如, 0和null被解析成false,21和非null對象被解析成true。
如果參數(shù)是監(jiān)控屬性observable的,那隨著值的變化將會自動添加或者刪除該元素上的CSS class。如果不是,那CSS class將會只添加或者刪除一次并且以后不在更新。
你可以使用任何JavaScript表達(dá)式或函數(shù)作為參數(shù)。KO將用它的執(zhí)行結(jié)果來決定是否應(yīng)用或刪除CSS class。
其它參數(shù)
無
注:應(yīng)用的CSS class的名字不是合法的JavaScript變量命名
如果你想使用my-class class,你不能寫成這樣:
...
… 因?yàn)閙y-class不是一個合法的命名。解決方案是:在my-class兩邊加引號作為一個字符串使用。這是一個合法的JavaScript 對象 文字(從JSON技術(shù)規(guī)格說明來說,你任何時候都應(yīng)該這樣使用,雖然不是必須的)。例如,
...
依賴性
除KO核心類庫外,無依賴。
5 style 綁定
目的
style綁定是添加或刪除一個或多個DOM元素上的style值。比如當(dāng)數(shù)字變成負(fù)數(shù)時高亮顯示,或者根據(jù)數(shù)字顯示對應(yīng)寬度的Bar。(注:如果你不是應(yīng)用style值而是應(yīng)用CSS class的話,請參考CSS綁定。)
例子
Profit Information
當(dāng)currentProfit 小于0的時候div的style.color是紅色,大于的話是黑色。
參數(shù)
主參數(shù)
該參數(shù)是一個JavaScript對象,屬性是你的style的名稱,值是該style需要應(yīng)用的值。
你可以一次設(shè)置多個style值。例如,如果你的view model有一個叫isServre的屬性,
...
如果參數(shù)是監(jiān)控屬性observable的,那隨著值的變化將會自動添加或者刪除該元素上的style值。如果不是,那style值將會只應(yīng)用一次并且以后不在更新。
你可以使用任何JavaScript表達(dá)式或函數(shù)作為參數(shù)。KO將用它的執(zhí)行結(jié)果來決定是否應(yīng)用或刪除style值。
其它參數(shù)
無
注:應(yīng)用的style的名字不是合法的JavaScript變量命名
如果你需要應(yīng)用font-weight或者text-decoration,你不能直接使用,而是要使用style對應(yīng)的JavaScript名稱。
錯誤: { font-weight: someValue }; 正確: { fontWeight: someValue }
錯誤: { text-decoration: someValue }; 正確: { textDecoration: someValue }
參考:style名稱和對應(yīng)的JavaScript 名稱列表。
依賴性
除KO核心類庫外,無依賴。
6 attr 綁定
目的
attr 綁定提供了一種方式可以設(shè)置DOM元素的任何屬性值。你可以設(shè)置img的src屬性,連接的href屬性。使用綁定,當(dāng)模型屬性改變的時候,它會自動更新。
例子
Report
呈現(xiàn)結(jié)果是該連接的href屬性被設(shè)置為year-end.html, title屬性被設(shè)置為Report including final year-end statistics。
參數(shù)
主參數(shù)
該參數(shù)是一個JavaScript對象,屬性是你的attribute名稱,值是該attribute需要應(yīng)用的值。
如果參數(shù)是監(jiān)控屬性observable的,那隨著值的變化將會自動添加或者刪除該元素上的attribute值。如果不是,那attribute值將會只應(yīng)用一次并且以后不在更新。
其它參數(shù)
無
注:應(yīng)用的屬性名字不是合法的JavaScript變量命名
如果你要用的屬性名稱是data-something的話,你不能這樣寫:
...
… 因?yàn)閐ata-something 不是一個合法的命名。解決方案是:在data-something兩邊加引號作為一個字符串使用。這是一個合法的JavaScript 對象 文字(從JSON技術(shù)規(guī)格說明來說,你任何時候都應(yīng)該這樣使用,雖然不是必須的)。例如,
...
依賴性
除KO核心類庫外,無依賴。
文章名稱:創(chuàng)新互聯(lián)Knockout教程:綁定語法(1)
本文網(wǎng)址:http://www.5511xx.com/article/cogeies.html


咨詢
建站咨詢
