文章目錄

• • • 前言
    • 對AppCan的MVVM的理解
    • • • 1 😂不要和我說??對象.對象.屬性
        • 2. 對MVVM的補充
        • 3. HTML的select標簽與MVVM
    • AppCan IDE使用總結
    • • • 1. IDE的快捷鍵
        • 2. UI設計器的英文名稱和中文含義

前言

??因為工作需要，所以接觸到了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里自定義的optionif (!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);}};// 手動調用 ajaxService_iSFBF9.ajaxCall(requestData, options);break;case "delete":break;default:break;}} }))();var ViewModel_xxFVnD = new(MVVM.ViewModel.extend({el: "#ContentFlexVer_1K3ucY",events: {},initialize: function() {// ViewModel初始化時，向后端請求數據，改變modelthis.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設計器的英文名稱和中文含義

總結

以上是生活随笔為你收集整理的AppCan学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。