1 Star 2 Fork 0

半月 / jstool

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

javascript 工具集

新增 jstAPI.core 核心模块

引入方式:

<script src="../src/jquery-x.xx.x.js"></script>
<script 
        src="../src/core.js" 
        data-core="jstAPI" 
        data-preload></script>
       
<!--
    data-core: 核心标识, 当前版本必须指定为jstAPI
    data-preload: 预加载标识, 该属性指定为加载无依赖模块
--> 

如何使用jstAPI.core

  • 动态加载jstAPI其它组件
    语法:
/**
 * componentName    {String}        组件名称
 * callback         {Function}      组件加载完成后回调函数, 
 *                                  上下文: 组件实例/工具对象/组件构造器
 *                                  参数: 工具对象/组件构造器
 * cCArgs           {*|Dom|jQuery}  (Component-Construct-Arguments)实例化组件需要的参数
 *                                  如果指定该参数列表且组件是可实例化对象,
 *                                  那么, callback上下文(this)为实例对象.
 *                                  否则为工具对象/组件构造器
 */
jstAPI.core[componentName].lazy(callback, cCArgs_1, cCArgs_2, ...);
jstAPI.core.componentName.lazy(callback);

示例:

// 加载工具组件
// 工具类组件包括: common, valid, ajax, ognl, view, model, 等...
jstAPI.core.ajax.lazy(function (com) {
    // 当组件为工具类型时
    // 回调函数参数与上下文是同一个对象
    console.log(this === com); // true
});

// 加载实例组件
// 实例组件包括: Form, Pager, Grid, 等...
jstAPI.core.Form.lazy(function(FormConstructor) {
    // 以下两种语法都可以获取到组件实例
    var 
        _this = this,
        form = new FormConstructor(document.getElementById("form"));
}, document.getElementById("form"));

使用jstAPI.view.bind实现数据绑定

  • 控件选项

    • data-model
      • 说明: 指定为数据双向绑定(input:file只允许控件到数据单项绑定)
      • 取值范围: 当前版本忽略该值
      • 适用控件:input:(text,password,file), select, textarea
    • value
      • 说明: 指定需要绑定的数据key
      • 取值范围: {{key}}
      • 适用控件: input,select,'textarea'
    • data-checkbox
      • 说明: 该属性使用在单选(多选)控件列表组父级容器中, data-model也是如此
      • 取值范围: {{key}}
      • 适用控件: input:(checkbox, radio)
  • API定义

/**
 * @param {Object} ps 配置参数
 * @param {Node|jQuery} ps.el 视图容器
 * @param {Object} ps.data 数据
 * @return {{el: (*|jQuery|HTMLElement), data: *, transition: {}, items: {}}}
 */
jstAPI.view.bind(ps);
  • 调用方式
$(function() {
  // 方式1
  jstAPI.core.view.lazy(function() {
    this.bind({
      el: $(".form"),
      data: {
          key: value
      }
    });
  });
  
  // 方式2
  // 这种调用方式必须确保 ViewModel.js 已经被加载
  jstAPI.view.bind({
    el: $(".form"),
    data: {
        key: value
    }
  });
});
  • input:(text|password|file)/select/textarea都使用value={{value}}方式绑定数据
    注意: input:file只能从控件到数据的单项绑定
<div class="form">
    <div>
        <input data-model value="{{value}}">
        <span>{{value}}</span>
    </div>
</div>
  • input:(checkbox|radio)使用data-checkbox="{{value}}"方式绑定数据
<div>
    <div data-model data-checkbox="{{value}}">
        多选数据:
        <label for="c1"><input type="checkbox" name="checkbox" id="c1" value="c1">c1</label>
        <label for="c2"><input type="checkbox" name="checkbox" id="c2" value="c2">c2</label>
        <label for="c3"><input type="checkbox" name="checkbox" id="c3" value="c3">c3</label>
        <label for="c4"><input type="checkbox" name="checkbox" id="c4" value="c4">c4</label>
        <label for="c5"><input type="checkbox" name="checkbox" id="c5" value="c5">c5</label>
    </div>
    <div>文本值: {{checkbox}}</div>
</div>

Comments ( 0 )

Sign in for post a comment

About

JavaScript/jQuery工具集 spread retract
Cancel

Releases (1)

All

Contributors

All

Activities

load more
can not load any more
JavaScript
1
https://git.oschina.net/osby/jstool.git
git@git.oschina.net:osby/jstool.git
osby
jstool
jstool
master

Search