這個例子稍微復(fù)雜一點(diǎn)，重點(diǎn)關(guān)注數(shù)據(jù)綁定。在這個例子中，模型（也就是數(shù)據(jù)）里包括一臺空調(diào)和一臺咖啡機(jī)：
變量名 | 數(shù)據(jù)類型 | 功能說明 |
空調(diào)_開關(guān) | 布爾 | 空調(diào)開關(guān) |
空調(diào)_模式 | 整數(shù) | 空調(diào)模式 (0: 制冷；1: 制熱；2: 送風(fēng)；2: 除濕；4: 自動） |
空調(diào)_風(fēng)速 | 整數(shù) | 0-4 共五檔 |
空調(diào)_垂直風(fēng)向 | 整數(shù) | 垂直風(fēng)向 (0: 自動；1：上；2：中；3：下） |
空調(diào)_水平風(fēng)向 | 整數(shù) | 水平風(fēng)向（0：自動；1：左；2：中；3：右） |
空調(diào)_溫度 | 布爾 | 溫度（0-40） |
咖啡_開關(guān) | 整數(shù) | 咖啡開關(guān) |
咖啡_類型 | 整數(shù) | 類型 (0: 卡布奇諾；1: 拿鐵；2: 美式；3: 意式） |
咖啡_溫度 | 整數(shù) | 溫度（0-100） |
咖啡_口味 | 整數(shù) | 口味 (0: 濃郁；1: 絲滑；2: 清淡；3: 平衡；4: 溫和） |
咖啡_熱奶 | 整數(shù) | 熱奶 (0: 少量；1: 較少；2: 較多；3: 大量） |
咖啡_奶泡 | 整數(shù) | 奶泡 (0: 少量；1: 較少；2: 較多；3: 大量） |
咖啡_水量 | 整數(shù) | 水量 (50-350ml)? ?? |
咖啡_剩余時間 | 整數(shù) | 制作時間（格式：分鐘：秒） |
咖啡_開始制作 | 布爾 | 開始制作 |
從模板創(chuàng)建項(xiàng)目，將 hmi/template_app 拷貝 hmi/home_automation 即可。
項(xiàng)目最好不要放到其它目錄，因?yàn)榉诺狡渌夸浶枰薷呐渲梦募械穆窂剑仁煜ぶ笤倏紤]放到其它目錄。路徑中也不要中文和空格，避免不必要的麻煩。
里面的控件太多，為了不至于太累贅，不同類型的綁定只舉一個例子：
完整示例可以參考 hmi/demo_app3
中間的靜態(tài)文本
綁定屬性 | 綁定規(guī)則 | 說明 |
v-data:value | {空調(diào)_溫度+‘℃’} |
右邊的按鈕（增加）
綁定屬性 | 綁定規(guī)則 | 說明 |
v-on:click | {fscript, Args=set(空調(diào)_溫度，min(空調(diào)_溫度+1, 40))} | 這里用函數(shù) set 將變量空調(diào)_溫度增加 1 度。min 函數(shù)保證變量的值不會超出 40。 |
綁定屬性 | 綁定規(guī)則 | 說明 |
v-on:click | {fscript, Args=set(空調(diào)_溫度，max(空調(diào)_溫度-1, 40))} | 這里用函數(shù) set 將變量空調(diào)_溫度減少 1 度。max 函數(shù)保證變量的值不會小于 0。 |
v-on:click 是一個常見的事件，最好記住，可以提高效率。
這個用一組單選按鈕實(shí)現(xiàn)，將多個單選按鈕放到 group_box 里（將多個單選按鈕放到 view 里也可以，只是需要為每個單選按鈕編寫綁定規(guī)則）。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-data:value | {空調(diào)_模式} |
如果使用 view 作為容器，則麻煩一點(diǎn)。需要為每個單選按鈕編寫兩條綁定規(guī)則：
綁定屬性 | 綁定規(guī)則 | 說明 |
v-data:value | {空調(diào)_模式 == 0} | 這里的 0 是單選按鈕的序數(shù)，根據(jù)實(shí)際情況調(diào)整 |
v-on:click | {fscript, Args=set(空調(diào)_模式，0)} | 這里的 0 是單選按鈕的序數(shù)，根據(jù)實(shí)際情況調(diào)整 |
這種方式雖然麻煩，但是可以處理變量的值不是從 0 開始或者不連續(xù)的情況。
綁定屬性 | 綁定規(guī)則 | 說明 |
v-data:value | v-data:value="{one_of(‘制冷;制熱;送風(fēng);除濕;自動’, 空調(diào)_模式)} | 這里的 one_of 的功能是從指定的字符串?dāng)?shù)組中取出對應(yīng)的子串。 |
剩余時間用一個靜態(tài)文本顯示。問題在于，剩余時間在內(nèi)部用一個正整數(shù)表示(秒數(shù))，而顯示的是“分鐘:秒”。所以需要一個轉(zhuǎn)換表達(dá)式：
綁定屬性 | 綁定規(guī)則 | 說明 |
v-data:value | int(咖啡_剩余時間/60) + ‘:’ + 咖啡_剩余時間%60} | 表達(dá)是按浮點(diǎn)數(shù)計(jì)算的，這里的 int 將結(jié)果轉(zhuǎn)換為正數(shù)。 |
在點(diǎn)擊開關(guān)按鈕時，會自動顯示或隱藏右邊的設(shè)置視圖。這是通過將視圖的可見性(visible)綁定到開關(guān)的狀態(tài)實(shí)現(xiàn)的:
綁定屬性 | 綁定規(guī)則 | 說明 |
v-data:visible | {空調(diào)_開關(guān)} |
4.6 指定窗口的模型為 default
這是最簡單也是最關(guān)鍵的一步:
綁定屬性 | 綁定規(guī)則 | 說明 |
v-model | default |
嚴(yán)格的意義上說，綁定規(guī)則也是一種代碼，不過相比于 C 語言，它有下面的優(yōu)勢：
無需編譯，直接運(yùn)行。
簡單，通常只有一行。
易懂，聲明式的語法。
修改資源文件 design/default/data/default_model.json, 將其內(nèi)容改為：
{?"空調(diào)_開關(guān)" : false,?"空調(diào)_模式" : 3,?"空調(diào)_風(fēng)速" : 3,?"空調(diào)_垂直風(fēng)向" : 1,?"空調(diào)_水平風(fēng)向" : 1,?"空調(diào)_溫度": 25,?"咖啡_開關(guān)" : false,?"咖啡_類型" : 1,?"咖啡_溫度" : 60,?"咖啡_口味" : 1,?"咖啡_熱奶" : 1,?"咖啡_奶泡" : 1,?"咖啡_水量" : 150,?"咖啡_剩余時間" : 200,?"咖啡_開始制作" : false}
? 推薦產(chǎn)品
??技術(shù)交流群
更多往期文章，請點(diǎn)擊“?閱讀原文?”。
