WeX5 開發(fā)App
1、新建應用
新建一個應用hello，
2、新建頁面
在“新建W向導”中選擇模板“移動→標準→空白”，文件名輸入index。在頁面中將放入數(shù)據(jù)組件和展現(xiàn)組件，如圖1-22。
圖1-22 Hello World App頁面構成
3、添加數(shù)據(jù)組件
在model組件中放data組件，data組件中的數(shù)據(jù)是一個行列結構的二維表。首選需要定義列，然后增加行。
定義列的步驟是：選擇data組件，右擊，在彈出的快捷菜單中選擇“編輯列”命令，打開“data列編輯”對話框。新增name列，并設置為ID列。
增加行的步驟是：選擇data組件，右擊，在彈出的快捷菜單中選擇“編輯數(shù)據(jù)”命令，打開“data數(shù)據(jù)編輯”對話框。新增一行。注意：在新增的行上單擊一下，再單擊“完成”按鈕。
data組件屬性值設置見表1-4。
表1-4 Hello World頁數(shù)據(jù)組件屬性說明
組件 | 父組件 | 屬性 | 屬性值 | 說明 |
data | model | autoLoad | true | 自動加載數(shù)據(jù) |
autoNew | false | 不自動新增數(shù)據(jù) |
4、添加展現(xiàn)組件
在window組件下放“表單”分類下面的input組件和output組件。界面設計如圖1-23.
圖1-23 Hello World App界面設計
（1）設置input組件的屬性以實現(xiàn)雙向數(shù)據(jù)綁定
將input組件和data組件的name列進行雙向數(shù)據(jù)綁定，input中的內容改變了，name列中的數(shù)據(jù)隨之改變，name列中的數(shù)據(jù)改變了，input中的內容也會隨之改變。通過使用數(shù)據(jù)組件的ref方法實現(xiàn)雙向數(shù)據(jù)綁定，即設置input組件的bind-ref屬性為$model.data1.ref("name")。表示input組件和data1組件當前行的name列雙向綁定。
（2）設置output組件的屬性以實現(xiàn)單向數(shù)據(jù)綁定
將output組件和data組件的name列進行單向數(shù)據(jù)綁定，name列中的數(shù)據(jù)改變了，output中的內容會隨之改變。通過使用數(shù)據(jù)組件的val方法實現(xiàn)單向數(shù)據(jù)綁定$model.data1.val("name")，單向數(shù)據(jù)綁定時，可以設置表達式，對數(shù)據(jù)進行加工。例如：設置output組件的bind-text屬性為'Hello'+$model.data1.val("name")。表示取data1組件當前行name列的值，和Hello '字符串拼接在一起。
表1-5列出了input組件和output組件屬性的設置方法。
組件 | 父組件 | 屬性 | 值 | 說明 |
input | window | bind-ref | $model.data1.ref("name") | 雙向綁定name列 |
output | window | bind-text | 'Hello '+$model.data1.val("name") | 單向綁定name列 |
5、運行調試
更多建議：