jstAPI.view

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']" >&times;</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>