jstAPI.view
视图组件, 可用于绑定数据, 加载数据, 配置第三方插件等.
API
loadSelect
- 远程加载下拉选项
- 参数(ps):
ps.container
: {Node|jQuery} 视图容器, 默认this.container[ps.itemDataHandler]
:{function(k=, v=):Object}
option数据转换函数, 参数:k,v, 返回值: {data-key:data-text}[ps.before]
:{function(res=)}
处理前置函数, 参数:res[ps.after]
:{function(res=)}
处理后置函数, 参数:res
- 返回值: 无
- 示例:
<select class="form-control" name="status" data-url="channelApply/integralOrderStatus" data-main="data" data-key="" data-text="" ></select> <!-- data-main : {flag:true, message:"", data:{}} data-key : option.value, 默认为元素值, 如果指定则 obj[data-key] data-text : option.text, 默认为元素值, 如果指定则 obj[data-text] -->
datetimepicker
- 启用jQuery-bootstrap-datetimepicker日期插件
- 参数(ps):
ps
{Object} 配置ps.options
{Array} 下拉数据ps.text
文本属性名ps.value
值属性名[ps.class]
下拉框样式- 示例:
<input data-less-that="[date-time-picker][name='end']" data-time-picker /> <span data-time-picker-clear="[name='begin']" >×</span> <!-- data-time-picker : jQuery-bootstrap-datetimepicker插件标记 data-time-picker-clear : {jQuery-Selector} 清空标记 data-less-that : {jQuery-Selector} 当前值不大于指定值 data-great-that : {jQuery-Selector} 当前值不小于指定值 -->
bind
- 视图&数据模型绑定
- 参数(ps):
ps
: {Object} 配置参数ps.el
: {Node|jQuery} 视图容器ps.data
: {Object} 数据
- 返回值(obj):
el
:ps.el
视图容器data
:ps.data
数据模型transition
: {Object} 转换数据items
: {Object} 数据-视图关联关系,[Key]
-模板属性名,[Value]
-视图数组
loadTemplate
- 加载模板视图数据
- 模板配置
data-url
: {String} 数据源data-main
{String} 从数据源中过滤主属性data-template
:view
模板标记
- 参数(ps):
ps
: {Object} 配置参数ps.view
: {Node|jQuery} 视图容器ps.dataHandler
:{function():boolean}
数据处理器,返回值:false-跳过渲染
- 返回值(obj):
view
: {jQuery} 视图容器dynamicData
: {Object} 动态数据items
: {Array.} 模板数据数组ps
: {Object} 请求参数$next
: {jQuery}view
下个节点$parent
: {jQuery}view
父节点append
: {function($tag=jQuery)} 追加节点clean
: {function()} 清理节点refresh
: {function(ps=[ps])} 刷新节点
- 示例:
<li class="flex-h" data-url="sys/backupList" data-main="data" data-template> <span class="date">{{date}}</span> <span class="note">{{note}}</span> </li>