摘要:采用了精简的架构,在确保灵活性的同时尽可能降低对开发者的技术要求。遵循的策略,特别适合于移动设备应用开发。由定义的前端模型用来标志当前字段的前端显示文本,使用取到当前字段对应的当前语言的国际化翻译。
[toc]
官方:http://www.cola-ui.com产品简介教程位置:http://www.cola-ui.com/guide/model
API: http://www.cola-ui.com/api/cola.html , http://legacy.cola-ui.com
组件地址:http://www.cola-ui.com/docs/button
源码地址:https://github.com/Cola-Org/cola-ui
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
JadeJade 是一个高性能的模板引擎,它深受 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) { })
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/75447.html
摘要:指南无论你正在构建什么,这些指南都旨在让你尽快提高工作效率使用团队推荐的最新项目版本和技术。使用进行消息传递了解如何将用作消息代理。安全架构的主题指南,这些位如何组合以及它们如何与交互。使用的主题指南以及如何为应用程序创建容器镜像。 Spring 指南 无论你正在构建什么,这些指南都旨在让你尽快提高工作效率 — 使用Spring团队推荐的最新Spring项目版本和技术。 入门指南 这些...
摘要:对于广大的前端开发人员来说,网站构建本是家常便饭其中也不得不涉及到性能优化的问题。将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量按需加载会导致大量重绘,影响渲染性能。对于广大的前端开发人员来说,网站构建本是家常便饭;其中也不得不涉及到性能优化的问题。之前也有接触过,今天总结一下这方面的技巧,下面是我的一下认知,欢迎探讨: Nu...
摘要:表示本次查询使用了索引,具体来说,是使用了和上的索引,。建立索引时,或者是每执行次查询之后,查询优化器都会重新评估查询计划。上一篇文章指南使用复合索引操作符如何使用索引索引对象和数组索引基数下一篇文章指南索引类型 上一篇文章:MongoDB指南---11、使用复合索引、$操作符如何使用索引、索引对象和数组、索引基数下一篇文章:MongoDB指南---13、索引类型 使用explain...
摘要:表示本次查询使用了索引,具体来说,是使用了和上的索引,。建立索引时,或者是每执行次查询之后,查询优化器都会重新评估查询计划。上一篇文章指南使用复合索引操作符如何使用索引索引对象和数组索引基数下一篇文章指南索引类型 上一篇文章:MongoDB指南---11、使用复合索引、$操作符如何使用索引、索引对象和数组、索引基数下一篇文章:MongoDB指南---13、索引类型 使用explain...
阅读 3434·2021-11-08 13:20
阅读 3359·2021-09-30 09:48
阅读 2559·2021-09-29 09:41
阅读 589·2021-09-22 15:04
阅读 2458·2021-08-23 09:44
阅读 3663·2020-12-03 17:26
阅读 1007·2019-08-30 14:10
阅读 1561·2019-08-29 18:34