相信各位應(yīng)用開發(fā)者在寫應(yīng)用的前端部分時,會遇到這樣的場景:通過某一事件觸發(fā)界面上某一內(nèi)容改變。比如說手表上心率數(shù)據(jù)的變化,是心率變化的事件觸發(fā)手表界面心率數(shù)據(jù)的改變??此坪唵蔚膱鼍?,實際上用到了“數(shù)據(jù)綁定”這一技術(shù)。
“事件”首先改變的是js中的一段文字對象,因js中的文字對象和標(biāo)記語言的text組件里的文字內(nèi)容做了數(shù)據(jù)綁定,使得改變js文字對象的操作能夠令text組件里的文字內(nèi)容發(fā)生改變。
“數(shù)據(jù)綁定”是實現(xiàn)上述場景最基礎(chǔ)的技術(shù),本文會基于一系列實例詳細(xì)介紹”HarmonyOS數(shù)據(jù)綁定“的使用方法和技巧。
01
數(shù)據(jù)綁定概念
數(shù)據(jù)綁定,指的是將界面元素(View)的數(shù)據(jù)和對象實例(Model)的數(shù)據(jù)進(jìn)行綁定,使它們具有相關(guān)性。
根據(jù)界面元素更新是否會引起對象實例的更新,數(shù)據(jù)綁定可分為單向數(shù)據(jù)綁定和雙向數(shù)據(jù)綁定。單向數(shù)據(jù)綁定指的是對象實例的數(shù)據(jù)更新會引起界面元素的更新,反之不行;雙向數(shù)據(jù)綁定指的是對象實例的數(shù)據(jù)更新會引起界面元素的數(shù)據(jù)更新,界面元素的數(shù)據(jù)更新也會引起對象實例的數(shù)據(jù)更新。
根據(jù)對象實例數(shù)據(jù)類型的不同,數(shù)據(jù)綁定又可分為簡單數(shù)據(jù)綁定和復(fù)雜數(shù)據(jù)綁定,簡單數(shù)據(jù)綁定數(shù)據(jù)為基本類型,而復(fù)雜數(shù)據(jù)綁定數(shù)據(jù)為列表類型。
1)HarmonyOS中的數(shù)據(jù)綁定
HarmonyOS目前支持單向數(shù)據(jù)綁定,即通過對象實例的數(shù)據(jù)更新來改變界面元素的數(shù)據(jù)。下面是Mustache語法數(shù)據(jù)綁定的通用寫法的代碼例子:
本文的代碼例子都會包含三個文件——元素構(gòu)建.hml、交互設(shè)計.js以及布局定義.css,只有.hml中可以寫數(shù)據(jù)綁定語法,請各位在閱讀時注意區(qū)分。下面來介紹HarmonyOS簡單數(shù)據(jù)綁定和復(fù)雜數(shù)據(jù)綁定。
02
HarmonyOS簡單數(shù)據(jù)綁定
HarmonyOS的簡單數(shù)據(jù)綁定支持“屬性綁定”、“樣式綁定”、“動畫綁定”和“內(nèi)容綁定”。樣式綁定和動畫綁定實際上是通過屬性標(biāo)簽發(fā)揮作用的,下面我們詳細(xì)看一下具體使用過程。
1)屬性綁定
屬性可分為“通用屬性”和“特有屬性”,其中通用屬性包括id、style、for、if、show和class,特有屬性為各組件獨有的屬性如switch的checked。下面我們先看通用屬性show綁定switch顯示數(shù)據(jù)的代碼:
點擊藍(lán)色按鈕,代表觸發(fā)改變switch 中show屬性的“事件”,show屬性的值從“false”改變?yōu)椤皌rue”,switch組件(白色開關(guān)按鈕)會在界面上顯示出來。如圖1所示:
圖1 通用屬性show改變導(dǎo)致switch顯示改變
特有屬性是各個組件獨有的屬性,如switch中的checked。下面是switch中checked屬性數(shù)據(jù)綁定的用法:
點擊藍(lán)色按鈕,代表觸發(fā)改變switch 中checked屬性的“事件”,checked屬性的值從“false”改變?yōu)椤皌rue”,switch組件(白色開關(guān)按鈕)的狀態(tài)從“關(guān)”變成“開”。如圖2所示:
圖2 特有屬性checked改變導(dǎo)致switch狀態(tài)改變
2)樣式綁定
樣式有靜態(tài)和動態(tài)之分,靜態(tài)樣式直接寫在元素標(biāo)簽的關(guān)鍵字style中;動態(tài)樣式寫在.css文件中,通過關(guān)鍵字class引入。當(dāng)前動態(tài)樣式不支持?jǐn)?shù)據(jù)綁定,數(shù)據(jù)綁定只能用在靜態(tài)樣式中,下面是switch靜態(tài)樣式寬高的數(shù)據(jù)綁定用法:
點擊藍(lán)色按鈕,代表觸發(fā)改變switch 中靜態(tài)樣式寬高改變的“事件”,靜態(tài)樣式寬高的值從“40px”改變?yōu)椤?0px”,switch組件(白色開關(guān)按鈕)的寬高變大。如圖3所示:
圖3 通用樣式寬高改變導(dǎo)致switch組件大小改變
3)動畫綁定
動畫效果可以通過靜態(tài)樣式中的關(guān)鍵字animation-name改變。我們可以在.css文件中創(chuàng)建多種keyframes的動畫效果,通過animation-name改變keyframes,以實現(xiàn)動畫效果的切換,下面是一個例子:
點擊藍(lán)色按鈕,這是代表觸發(fā)改變div 中動畫效果的"事件",animation-name的值從“animationChange1”改變?yōu)椤癮nimationChange2”,div組件動效從顏色變化動效變成寬度變化動效。如圖4所示:
圖4 animation-name改變導(dǎo)致動畫樣式改變
4)內(nèi)容綁定
除了屬性、樣式和動畫綁定,HarmonyOS一些特殊組件如text,其標(biāo)簽內(nèi)容中可以添加數(shù)據(jù)綁定,具體使用方法如下:
點擊藍(lán)色按鈕,代表觸發(fā)改變text 中文字內(nèi)容的“事件”,text組件中文字內(nèi)容從“Hello World”改變?yōu)椤癏ello Bob”,界面顯示的文字相應(yīng)改變。如圖5所示:
圖5 文字?jǐn)?shù)據(jù)改變導(dǎo)致text中的文字內(nèi)容改變
簡單數(shù)據(jù)綁定中,通用屬性基本都支持?jǐn)?shù)據(jù)綁定,如style、if和show中綁定的對象數(shù)據(jù)改變都會使相應(yīng)的View改變并刷新,只有class不支持?jǐn)?shù)據(jù)綁定。同時,id雖然支持?jǐn)?shù)據(jù)綁定,但其綁定的對象數(shù)據(jù)改變實際上只修改了DOM,不會對View有影響。
03
HarmonyOS復(fù)雜數(shù)據(jù)綁定
當(dāng)數(shù)據(jù)綁定的對象為列表(數(shù)組)時,與for搭配使用,可以實現(xiàn)通過for展開多個組件(即列表渲染),減少.hml重復(fù)寫組件。復(fù)雜數(shù)據(jù)綁定和列表渲染是強相關(guān)的,我們可以先了解一下HarmonyOS應(yīng)用開發(fā)中如何用for屬性做列表渲染。
1)列表渲染
參考HarmonyOS官網(wǎng)的開發(fā)文檔:
https://developer.harmonyos.com/cn/docs/documentation/doc-references/lite-wearable-syntax-hml-0000001078368468
我們可以看到列表渲染主要有三種方式:
for="array":其中array為數(shù)組對象,array的元素變量默認(rèn)為$item。
for="v in array":其中v為自定義的元素變量,元素索引默認(rèn)為$idx。
for="(i, v) in array":其中元素索引為i,元素變量為v,遍歷數(shù)組對象array。
這三種方式的實現(xiàn)代碼為:
2)通用屬性的復(fù)雜數(shù)據(jù)綁定
下面以靜態(tài)style屬性為例,將style和數(shù)組進(jìn)行數(shù)據(jù)綁定,可以通過改變數(shù)組的數(shù)據(jù)讓組件樣式改變,具體使用方法如下:
點擊藍(lán)色按鈕,代表觸發(fā)改變與數(shù)組綁定的某switch組件寬高的“事件”,第二個switch靜態(tài)樣式寬高的值從“40px”改變?yōu)椤?0px”,switch組件(白色開關(guān)按鈕)的寬高變大。如圖6所示:
圖6 綁定靜態(tài)樣式的數(shù)組改變導(dǎo)致switch寬高改變
然而,有一些屬性不支持復(fù)雜數(shù)據(jù)綁定,例如, if屬性和swiper組件的loop屬性等。他們的對象數(shù)據(jù)改變,都無法改變相應(yīng)的view層顯示效果,具體組件的數(shù)據(jù)綁定支持情況可以查閱官方開發(fā)文檔。
04
總結(jié)
HarmonyOS簡單數(shù)據(jù)綁定,可以支持“屬性綁定”、“樣式綁定”、“動畫綁定”和“內(nèi)容綁定”。HarmonyOS復(fù)雜數(shù)據(jù)綁定支持情況和簡單數(shù)據(jù)綁定支持情況相同。對于諸多組件中存在的特有屬性的復(fù)雜數(shù)據(jù)綁定支持情況,歡迎各位開發(fā)者參與驗證。最后概括HarmonyOS數(shù)據(jù)綁定的使用技巧:
1. HamonyOS僅支持單向的數(shù)據(jù)綁定,語法為Mustache;
2. 在簡單數(shù)據(jù)綁定場景下,style、if和show及特有的屬性都會刷新View的顯示;
3. 在簡單數(shù)據(jù)綁定場景下,靜態(tài)樣式中的animation-name更改會刷新View的動畫效果;
4. 在簡單數(shù)據(jù)綁定場景下,text等組件的內(nèi)容綁定更改會刷新View的顯示;
5. 在復(fù)雜數(shù)據(jù)綁定場景下,數(shù)據(jù)綁定的支持情況和簡單數(shù)據(jù)綁定相同,推薦使用splice方法對數(shù)據(jù)內(nèi)容進(jìn)行增刪;
以下思維導(dǎo)圖概括了該版本下HarmonyOS數(shù)據(jù)綁定的支持情況。
圖7 HarmonyOS數(shù)據(jù)綁定全貌圖
編輯:jq
-
數(shù)據(jù)
+關(guān)注
關(guān)注
8文章
7253瀏覽量
91757 -
代碼
+關(guān)注
關(guān)注
30文章
4899瀏覽量
70594 -
HarmonyOS
+關(guān)注
關(guān)注
80文章
2118瀏覽量
32817
原文標(biāo)題:HarmonyOS數(shù)據(jù)綁定使用技巧
文章出處:【微信號:HarmonyOS_Dev,微信公眾號:HarmonyOS開發(fā)者】歡迎添加關(guān)注!文章轉(zhuǎn)載請注明出處。
發(fā)布評論請先 登錄
【 HarmonyOS 5 入門系列 】鴻蒙HarmonyOS示例項目講解

HarmonyOS入門指南
HarmonyOS 5 makeObserved接口詳解
HarmonyOS5云服務(wù)技術(shù)分享--云數(shù)據(jù)庫使用指南
HarmonyOS5云服務(wù)技術(shù)分享--ArkTS開發(fā)Node環(huán)境
HarmonyOS5云服務(wù)技術(shù)分享--賬號關(guān)聯(lián)開發(fā)指南
harmony OS NEXT-雙向數(shù)據(jù)綁定MVVM以及$$語法糖介紹
高質(zhì)量 HarmonyOS 權(quán)限管控流程

軟通動力亮相華為HarmonyOS Connect伙伴峰會
HarmonyOS開發(fā)指導(dǎo)類文檔更新速遞(下)

fpga 管腳不讓綁定的問題,綁定時提示: Not assignable
怎么綁定IP地址和MAC地址
AWTK 最新動態(tài):支持鴻蒙系統(tǒng)(HarmonyOS Next)

機智云智家APP的設(shè)備掃描與綁定限制

評論