教程位置：http://www.cola-ui.com/guide/model
API: http://www.cola-ui.com/api/cola.html , http://legacy.cola-ui.com
產品簡介
- Cola UI是支持雙向數據綁定的一站式前端UI框架。采用了精簡的MVVM架構，在確保靈活性的同時盡可能降低對開發者的技術要求。
- Cola UI遵循Mobile First的策略，特別適合於移動設備應用開發。
- Cola UI整合了jQuery和Semantic UI，同時提供更多常用的List、Table、Tree等高級控件。
開始
以上內容都是通過cola-ui官網獲得的資料，絕大多數的開發內容可以參考cola-ui官網提供的API進行查閱
本文檔主要針對於camsi工程中用到的功能或特性，且可能不存在於cola-ui官網提供的API進行整理和說明
組成結構
通常要基於camsi工程在瀏覽器渲染出來的頁面由三個部分組成，例如：simple01.jade、M.js、simple01Model.js
Jade
Jade 是一個高性能的模板引擎，它深受 Haml影響，它是用 JavaScript 實現的，並且可以供 [Node](http://nodejs.org/) 使用，你也可以[在此試用](http://naltatis.github.io/jade-syntax-docs/)，這里推薦[Jade入門中文文檔](http://www.nooong.com/docs/jade_chinese.htm)
extends /_page
block body
v-box
flex-box
.content(style="overflow: auto")
c-table(bind="simple01s" dataType="Simple01")
column(property="name")
append scripts
script(src="simple01Model.js")
script(src="simple01.js")
dataType的值應該與Js中定義的dataType的值以及Model.js中定義的dataType的值相等
Js
不做描述
cola(function(model) {
model.dataType($DataType.Simple01);
model.describe("simple01s", {
dataType : "Simple01",
provider : {
url : "controller/simple01Service/findPagination?from={{$from}}&limit={{$limit}}",
pageSize : 10,
sendJson : true,
loadMode: 'manual'
}
});
model.set("title", "[(#{simple01})]");
model.action({
test : function() {
cola.alert('test')
}
});
});
所有正規的操作包括事件都應該編寫在cola(function(model) { })中，其中首先需要使用dataType定義當前Js中所有用到的DataType，使用model.describe交互后台數據到當前指定model，使用model.set("", "")向model交互數據，頁面所有用到的事件方法應該存在於model.action({})中。
Model.js
由cola-ui定義的前端模型
var $DataType = {
Simple01: {
name: "Simple01",
properties : {
name : {
caption : "[(#{name})]",
dataType : "string"
}
}
}
};
caption用來標志當前字段的前端顯示文本，使用[(#{ })]取到當前字段對應的當前語言的國際化翻譯。
表單相關
表單對國際化的處理
在正常情況下，dataType可能會被公用，然后每個字段在每個不同的地方顯示的文本標識不一樣，這時候可以使用
caption屬性進行操作，例如：caption=ll.l("name")前面提到在Js中國際化使用的是[(#{ })]
表單對日期格式的處理
通常需要將當前日期字段進行格式化只需要下面代碼即可：
field(property="birthday")
label
c-datepicker(displayFormat="yyyy-MM-dd" inputFormat="yyyy-MM-dd")
將datatype類型為Date的birthday字段的文本顯示和選擇的日期格式調整為"yyyy-MM-dd"
表單對枚舉值的處理
我們經常會把一些常規的數據做成枚舉值存放在數據庫，並把頁面的文本輸入框改變成為下拉項
頁面元素
field(property="status")
label
c-dropdown(c-items="dictionary('10000')")
引入Js
script(src=basecodeCP + "controller/basecode/codeDetail/findCodeDetails?baseCodeIds=10000")
或者
script(src="controller/basecode/codeDetail/findCodeDetails?baseCodeIds=10000")
這樣頁面會去加載枚舉值代碼為10000的對應status存放的id對應的文本顯示到當前字段，並為當前字段提供下拉項
表單對文本域的處理
類似於備注，通常都是用文本框來顯示
fields.cols-1
field(property="remark")
label
c-textarea(rows="3")
首先定義當前字段獨占一列，使用c-textarea(rows="3")表名當前字段獨占三列
表單對只讀的處理
正常場景並不是表單中列出的所有的字段都是手動輸入的，比如ID，我們可以使用
readOnly="true"對每個field進行只讀控制，也可以將readOnly="true"放在c-form屬性里面來控制整個表單只讀
表單對省市縣級聯的處理
Jade
field(property="country"
label
c-dropdown(c-items="dictionary('CountryCode')" onSelectData="onCountrySelect")
(property="province" caption=ll.l("province") c-readOnly="queryCondition.country != 'CHN'")
label
c-dropdown(c-items="provinces" textProperty="name" assignment="province=kind" onSelectData="onProvinceSel")
field(property="city" caption=ll.l("city") c-readOnly="queryCondition.country != 'CHN'")
label
c-dropdown(c-items="cities" textProperty="name" assignment="city=kind" beforeOpen="beforeCityOpen" onSelectData="onCitySel")
field(property="county" caption=ll.l("county") c-readOnly="queryCondition.country != 'CHN'")
label
c-dropdown(c-items="counties" textProperty="name" assignment="county=kind" beforeOpen="beforeCountyOpen")
引入數據字典
script(src="controller/basecode/codeDetail/findCodeDetails?baseCodeIds=CountryCode")
Js
cola(function(model) {
model.describe("provinces", {
provider: {
url: "controller/basecode/codeDetail/findCachedCodeDetails",
parameter: {
baseCodeId: "Address",
parentId: "NULL"
}
}
});
model.set("title", "[(#{simple01})]");
model.set("queryCondition", {"country":"CHN"});
model.action({
beforeCityOpen: function () {
var province = model.get("queryCondition.province");
$.ajax("controller/basecode/codeDetail/findCachedCodeDetails?baseCodeId=Address&parentId=" + province, {
type: "get", async: false
}).done(function (result) {
if (result) {
model.set("cities", result);
}
});
},
beforeCountyOpen: function () {
var city = model.get("queryCondition.city");
$.ajax("controller/basecode/codeDetail/findCachedCodeDetails?baseCodeId=Address&parentId=" + city, {
type: "get", async: false
}).done(function (result) {
if (result) {
model.set("counties", result);
}
});
},
onProvinceSel: function (self, arg) {
var queryCondition = model.get("queryCondition");
if(queryCondition.get("province") != arg.data.get("kind")){
queryCondition.set("city", "");
queryCondition.set("county", "");
}
},
onCitySel: function (self, arg) {
var queryCondition = model.get("queryCondition");
if(queryCondition.get("city") != arg.data.get("kind")){
queryCondition.set("county", "");
}
},
onCountrySelect: function (self, arg) {
var selectedItem = arg.data;
if("CHN" != selectedItem.key) {
model.get("queryCondition").set("province", "");
model.get("queryCondition").set("city", "");
model.get("queryCondition").set("county", "");
}
}
});
});
表格相關
表格對枚舉值的處理
通常我們都是在表單錄入數據，在表格中進行簡約展示，所以在表單中錄入的下拉枚舉值我們需要在表格中使用的時候必須使用獲取到的枚舉值進行翻譯
column(property="status")
template
div(c-bind="translate('10000',$default)")
表格對行內編輯的處理
在對於處理一些簡單數據的時候我們可以不需要彈出一個復雜的編輯框對當前行的數據進行編輯處理，可以直接在表格進行行內編輯
c-table(bind="simple01s" dataType="Simple01" readOnly="false")
表格行編輯對下拉項的處理
在表單編輯我們可以去選擇一個下拉項做為數據值，當然在表格行編輯也可以
column(property="status")
template(name="edit")
c-dropdown(bind="$default" c-items="dictionary('10000')")
最后代碼整理為
column(property="status")
template(name="edit")
c-dropdown(bind="$default" c-items="dictionary('10000')")
template
div(c-bind="translate('10000',$default)")
表格添加操作列的處理
通常我們需要在表格的最后一列添加一行操作列來處理當前行的數據
c-table(bind="simple in simple01s" dataType="Simple01")
column(caption=ll.l("operation"))
template
div
a.cell-link(c-onclick="view(simple)")=ll.l("view")
表格聯動的處理
很多場景下，我們的數據和數據都是有關聯關系，比如一本書對應書籍的出版社的詳細信息，這時候針對不同的書本信息聯動到出版社的詳細信息
因為此處是兩個表的關聯，所以需要定義兩個dataType
cModel.js
var $DataType = {
A: {
name: "A",
properties : {
name : {
caption : "[(#{name})]",
dataType : "string",
}
}
},
B : {
name : "B",
properties : {
name : {
caption : "[(#{name})]",
dataType : "string"
}
}
}
};
c.jade
c-table(bind="as" dataType="a")
column(property="name")
c-table(bind="as#.bs" dataType="b")
column(property="name")
c.js
cola(function(model) {
model.dataType($DataType.B);
$DataType.A.properties.bs = {
dataType: "B",
aggregated: true,
provider: {
url: "controller/B/find",
sendJson: true,
parameter: {
"name": "{{@name}}"
}
}
}
model.dataType($DataType.A);
model.describe("as", {
dataType : "A",
provider : {
url : "controller/C/findPagination?from={{$from}}&limit={{$limit}}",
pageSize : 10,
sendJson : true,
loadMode: 'manual'
}
});
model.set("title", "[(#{C})]");
model.action({
});
});
在關聯中可以使用parameter:{"name":"{{@name}}"}方式拿到父表中當前選中行的name的值
表格數據加載的處理
在某些場景下我們可以讓表格數據直接加載到頁面，也可以使用事件來觸發加載數據
loadMode: 'manual'
可以通過loadMode來控制表單是否在頁面加載的時候加載數據到頁面：manual手工加載，注釋掉loadMode缺省自動加載數據
面板Panel 相關
在panel頭位置添加按鈕
c-panel#panelDemo(caption=ll.l("panel"))
template(name="tools")
div
c-button.primary(caption=ll.l("add") click="add")
其它
預加載處理
通常我們會在頁面加載完成的時候自動觸發一部分方法或者set一部分數據值到指定屬性
cola.ready(function() {
cola.widget("panelDemo").collapse(); // 在加載完頁面之后 折疊id為panelDemo的面板
});
代碼應該放在cola(function (model) { })