文章目录
前言
因为工作需要，所以接触到了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设计器的英文名称和中文含义
