文章目錄
前言
因爲工作需要，所以接觸到了AppCan。它是基於HTML5, CSS, JS技術的Hybird跨平臺移動應用開發工具。下面，我記錄一下學習心得。
常用鏈接：
- AppCan官方文檔 http://newdocx.appcan.cn/AppCan
- AppCan使用到的 Backbone.js
中文網 https://www.backbonejs.com.cn/
英文網 https://backbonejs.org/
對AppCan的MVVM的理解
1 😂不要和我說 對象.對象.屬性
AppCan不支持 data-bind=“MVVM控制器:對象.對象.屬性” 這種寫法，只支持data-bind=“MVVM控制器:屬性” 😂也就是說，不能有點兒，得手動把深層的屬性提取出來！！！
如果AppCan Service返回的json數據是下面這個樣子:
{
country: {
name: "China",
continent: "Asia",
capital: {
name: "Beijing",
longitude: "116.3E",
latitude: "39.9N"
}
}
}
那麼下面的數據綁定就不起作用：
<!-- 想在輸入框顯示中國首都 Beijing，但實現不了 -->
<input 省略部分內容 data-bind="value:country.capital.name">
此時，必須對assets/mvvm目錄下的js文件，做如下修改：
var Model_5hXEXP = new(MVVM.Model.extend({
defaults: {
"country": {
"name": "China",
"continent": "Asia",
"capital": {
"name": "Beijing",
"longitude": "116.3E",
"latitude": "39.9N"
}
}
},
initialize: function() {
return;
},
parse: function(data) {
return data;
},
validate: function(attrs, options) {
return;
},
/*這裏是重點，在這裏把 對象.對象.屬性 提取爲 屬性*/
computeds: {
capital_name: {
get:function () {
var country = this.get('country');
return country.capital.name;
}
}
},
sync: function(method, model, options) {
switch (method) {
case "create":
break;
case "update":
break;
case "patch":
break;
case "read":
Service_iSFBF9.request({},options);
break;
case "delete":
break;
default:
break;
}
}
}))()
然後，html頁面的數據綁定也要做如下修改：
<!-- 使用model的computeds裏自定義的屬性來綁定 -->
<input 省略部分內容 data-bind="value:capital_name">
2. 對MVVM的補充
使用AppCan IDE的UI設計器生成的代碼，不能直接實現MVVM，需要做一些補充。
AppCan MVVM官方文檔 http://newdocx.appcan.cn/data-docking-interaction
需要補充什麼，我們以一個例子來說明。比如index.html中有一個輸入框：
<div class="bc-bg ub ub-ver ub-ac ub-con" data-control="FLEXBOXVER" id="ContentFlexVer_1K3ucY">
<div class="uinput ub bc-border uba ub-ac" data-control="ICONINPUT" id="iconInput_SSrSmb">
<!--輸入框，綁定的數據是capital_name-->
<input placeholder="" type="text" class="ub-f1" data-control-scope="iconInput_SSrSmb" data-bind="value:capital_name">
</div>
</div>
assets/mvvm/index.js的內容如下：
var Service_iSFBF9 = new MVVM.Service({
pretreatment: function(data, option) {
// 這裏把請求參數由json對象，轉爲json字符串
return JSON.stringify(data);
},
dosuccess: function(data, option) {
return data;
},
doerror: function(e, err, option) {
return err;
},
validate: function(data, option) {
// 根據響應的data.status是否爲ok，來判斷請求是否成功
return data.status == 'ok' ? 0 : -1;
},
ajaxCall: function(data, option) {
var self = this;
appcan.request.ajax({
url: "http://localhost:8080/country/showByCountryName",
type: "POST",
data: this.pretreatment(data, option),
dataType: "json",
contentType: "application/json",
success: function(data) {
var res = self.validate(data, option);
// 這裏的option，就是model裏自定義的option
if (!res) option.success(self.dosuccess(data, option));
else option.error(self.doerror(data, res, option));
},
error: function(e, err) {
option.error(self.doerror(e, err, option));
}
});
}
});
var Model_5hXEXP = new(MVVM.Model.extend({
// model的默認值
defaults: {
"data": {
"country": {
"name": "Canada",
"continent": "North America",
"capital": {
"name": "Ottawa",
"longitude": "93.5W",
"latitude": "41.0N"
}
}
},
"status": "ok",
"msg": "success"
},
initialize: function() {
return;
},
parse: function(data) {
return data;
},
validate: function(attrs, options) {
return;
},
computeds: {
// 把深層的屬性提取出來
capital_name: {
get:function () {
var data = this.get('data');
return data.country.capital.name;
}
}
},
sync: function(method, model, options) {
switch (method) {
case "create":
break;
case "update":
break;
case "patch":
break;
case "read":
// 請求參數
var requestData = {
"countryName": "China"
};
// 自定義的option操作
var options = {
success: function(data) {
/*
【重點】ajax請求成功後，把響應的數據，使用model.set()方法設置到model裏
不能直接使用model.屬性 = xxx 這種方式直接修改屬性的值，直接修改不會觸發
change事件，這在Backbone.js的文檔中說的很清楚了。只有使用set()方法，纔會
觸發change事件
*/
Model_5hXEXP.set("data", data.data);
},
error: function(e) {
console.log('model sync read error is ...');
console.log(e);
}
};
// 手動調用 ajax
Service_iSFBF9.ajaxCall(requestData, options);
break;
case "delete":
break;
default:
break;
}
}
}))();
var ViewModel_xxFVnD = new(MVVM.ViewModel.extend({
el: "#ContentFlexVer_1K3ucY",
events: {
},
initialize: function() {
// ViewModel初始化時，向後端請求數據，改變model
this.model.sync("read");
return;
},
model: Model_5hXEXP,
}))();
3. HTML的select標籤與MVVM
官網上沒有<select>標籤數據綁定的例子。下面我補充一下，直接上例子吧。
selectDemo.html局部：
<div class="select uba bc-border bc-text" data-control="SELECT" id="Select_tniRHJ">
<div class="text"></div>
<div class="icon"></div>
<select selectedindex="0" data-control-scope="Select_tniRHJ" data-bind="for:data">
<!--綁定的是城市編碼和城市名稱-->
<option data-bind="text:cityCode,value:cityName"></option>
</select>
</div>
assets/mvvm/selectDemo.js的內容如下：
var Service_abcdef = new MVVM.Service({
pretreatment: function(data, option) {
// 把json格式請求參數, 轉換成form-data形式
return $.param(data);
},
dosuccess: function(data, option) {
return data;
},
doerror: function(e, err, option) {
return err;
},
validate: function(data, option) {
return data.status == 'ok' ? 0 : -1;
},
ajaxCall: function(data, option) {
var self = this;
appcan.request.ajax({
url: "http://localhost:8080/country/listCityByProvinceName",
type: "GET",
data: this.pretreatment(data, option),
dataType: "json",
contentType: "application/x-www-form-urlencoded",
success: function(data) {
var res = self.validate(data, option);
if (!res) option.success(self.dosuccess(data, option));
else option.error(self.doerror(data, res, option));
},
error: function(e, err) {
option.error(self.doerror(e, err, option));
}
});
}
});
var Model_abcdef = new(MVVM.Model.extend({
defaults: {
"data": [
{
"cityCode": 1,
"cityName": "石家莊"
},
{
"cityCode": 2,
"cityName": "邢臺"
}
],
"status": "ok",
"msg": "success"
},
initialize: function() {
return;
},
parse: function(data) {
return data;
},
validate: function(attrs, options) {
return;
},
computeds: {
},
sync: function(method, model, options) {
switch (method) {
case "create":
break;
case "update":
break;
case "patch":
break;
case "read":
console.log('model_abcdef sync running...');
// 請求參數
var requestData = {
"province": "河北",
};
// 自定義的option操作
var options = {
success: function(data) {
Model_abcdef.set("data", data.data);
},
error: function(e) {
console.log('model sync read error is ...');
console.log(e);
}
}
Service_abcdef.ajaxCall(requestData, options);
break;
case "delete":
break;
default:
break;
}
}
}))();
var ViewModel_abcdef = new(MVVM.ViewModel.extend({
el: "#Select_tniRHJ",
events: {
},
initialize: function() {
console.log("ViewModel_abcdef is initializing ...");
this.model.sync("read");
return;
},
model: Model_abcdef
}))();
AppCan IDE使用總結
1. IDE的快捷鍵
| 組合 | 作用範圍 | 含義 |
|---|---|---|
| Ctrl + Shift + L | 全局 | 顯示所有快捷鍵的定義 |
| Ctrl + Shift + F | 文本編輯器頁面 | 代碼格式化 |
| Ctrl + F | 文本編輯器頁面 | 查找內容 |
| Ctrl + Q + 2 | 文本編輯器頁面 | 回到光標上次所在的位置 |
| Alt + ? 或者 Alt + / |
文本編輯器頁面 | 智能提示 |
| Ctrl + ← | 文本編輯器頁面 | 離當前光標最近的前一個單詞 |
| Ctrl + → | 文本編輯器頁面 | 離當前光標最近的後一個單詞 |
| Ctrl + D | 文本編輯器頁面 | 刪除一行 |
| Ctrl + Shift + Enter | 文本編輯器頁面 | 在當前行上面添加一行 |
| Ctrl + Enter | 文本編輯器頁面 | 在當前行下面添加一行 |
| Ctrl + Alt + ↓ | 文本編輯器頁面 | 向下複製一行 |
| Alt + ↑ | 文本編輯器頁面 | 行向上移動 |
| Alt + ↓ | 文本編輯器頁面 | 行向下移動 |
| Ctrl + Shift + X | 文本編輯器頁面 | 更改爲大寫 |
| Ctrl + Shift + Y | 文本編輯器頁面 | 更改爲小寫 |
2. UI設計器的英文名稱和中文含義
