OF 模块化轻量级php框架 of

参数说明

L.open('oFill')(node, data, argv) 将 data 按规则填充到 node 子节点中

nodeelement, array

填充的节点, 可以是数组节点

dataobject

匹配数据

argvelement, array

配置参数

{
    "bind" : 指定依照的属性值, 数组, 默认=["-data", "name"]
    "mark" : 锚点注释, 字符串, 默认="-data", 如: <!---data=bind-->
    "call" : 绑定回调, 默认无 {
        "fill" : 填充数据时回调 {
            绑定值 : 回调函数, 返回false停止默认匹配, this=结构 {
                "type"  : 触发类型
                "bind"  : 当前匹配键
                "data"  : 传入的匹配数据
                "argv"  : 匹配参数
                "value" : 当前匹配值(回调中可修改)
                "node"  : 匹配的节点
            }
        },
        "each" : 遍历数据时回调 {
            绑定值 : 回调函数, 返回false停止默认匹配, this=结构 {
                "type"  : 触发类型
                "bind"  : 当前匹配键
                "data"  : 传入的匹配数据
                "argv"  : 匹配参数
                "value" : 当前匹配值(回调中可修改)
                "node"  : 匹配的节点, 可修改(单标签或注释时将依次将模版加入上方)
                "tmpl"  : 遍历模版, 可修改(模版包在一个标签中)
            }
        }
    }
}

集成演示

<!-- 
 - 默认匹配规则 : 
 -     选框 : 相同值设置选中状态
 -     图片 : 设置src
 -     表单 : 设置value值
 -     其它 : 设置text值
 - 自动循环 : 当绑定值为数组, 0元素为对象时, 遍历数据并克隆子元素, 如: {
 -     绑定 : [
 -         {xxx: yyy, ...},
 -         ...
 -     ]
 - }
-->
<div id="li">
    <span -data="aa"></span>
    <div name="bb"></div>
    <div name="cc">
        <span name="dd"></span>
    </div>
    <input type="radio" name="ee" value="1">
    <input type="radio" name="ee" value="2">
    <select multiple="multiple" name="ff">
        <option>Multiple</option>
        <option value="aa">Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>
    <ul name="ul">
        <li name="li">
            <ul -data="each">
                <li name="item">
                    <img name="img" width="50px">
                </li>
            </ul>
        </li>
    </ul>
    <select name="zz">
        <option>默认</option>
        <option name="aazz">aa</option>
    </select>
    <textarea name="gg" id="" cols="30" rows="2"></textarea>
    <br>
    <!---data=hh -->
</div>
<script>
var activities = {
    "aa" : "-data填充aa",                   //"-data" 绑定 "aa"
    "bb" : "name填充bb",                    //"name" 绑定 "bb"
    "cc" : {                                //<font color="red">"cc" 中的 "bb" 也会被父同名 填充, 但优先级低</font>
        "dd" : "深度填充dd"                 //深度绑定 dd
    },
    "ee" : 2,                               //选择单选框或复选框, 不判断类型
    "ff" : ["Multiple", "aa"],              //选择多选列表
    "gg" : "文本域填充",                    //文本域填充
    "hh" : "锚点注释填充",
    "ul" : [                                //遍历绑定, 会触发 each 事件
        {
            "li"  : "覆盖填充"              //克隆ul子节点, 向[name=li]的text赋值
        },
        {
            "img" : "a.jpg"                 //克隆ul子节点, 向[name=img]的src赋值
        },
        {
            "each" : [                      //克隆ul子节点后, 继续克隆[-data="each"]的子节点
                {"item" : 1},               //克隆 each 子节点, 向[name="item"]的text赋值
                {"item" : 2},               //克隆 each 子节点, 向[name="item"]的text赋值
            ]
        }
    ],
    'yy' : [                                //不存在数据处理
        {"aazz" : '创建div1'},
        {"aazz" : '创建div2'}
    ],
    'zz' : [                                //保留默认值回调
        {"aazz" : 1},
        {"aazz" : 2}
    ]
};

L.open('oFill')(document.getElementById("li"), activities, {
    "call" : {
        "fill" : {
            "item" : function () {          //[name="item"]填充时触发回调
                this.value += 1;            //修改填充值
            }
        },
        "each" : {
            "ul" : function () {            //[name=ul]遍历开始时触发, 添加"默认"标签
                $(this.node).append('<li>添加默认值</li>');
            },
            "yy" : function () {            //创建模板
                this.node = $('<!-- test -->').appendTo(document.body).get(0);
                this.tmpl = $('<div><div name="aazz"></div></div>').get(0);
            },
            "zz" : function () {            //修改模板
                $(':eq(0)', this.tmpl).appendTo(this.node);
            }
        }
    }
});
</script>

数据填充工具

参数说明

集成演示