RepeatJs

repeatInnerHTML


<div class="effect table" id="tpl_repeat_inner">
    <div class="flex-row-around tr">
        <div class="td">{name}</div>
        <div class="td">{age}</div>
        <div class="td">{fav}</div>
    </div>
</div>

javascript:

let repeat = new zbRepeat();
let json_list = [{name:'张三', age:18, fav:1},{name:'李四', age:18, fav:2},{name:'王五', age:18, fav:3},{name:'赵六', age:18, fav:4}];
repeat.repeatInnerHTML('#tpl_repeat_inner', json_list); //循环渲染innerHTML

{name}

{age}

{fav}

repeatOuterHTML


<div class="effect table">
    <div class="tpl_repeat_outer flex-row-around tr">
        <div class="td">{name}</div>
        <div class="td">{age}</div>
        <div class="td">{fav}</div>
    </div>
</div>

javascript:

let repeat = new zbRepeat();
let json_list = [{name:'张三', age:18, fav:1},{name:'李四', age:18, fav:2},{name:'王五', age:18, fav:3},{name:'赵六', age:18, fav:4}];
        
function maping(obj) {
    let fav = '';
    switch (obj.fav) {
        case 1: fav = '篮球'; break;
        case 2: fav = '足球'; break;
        case 3: fav = '地球'; break;
        default: fav = '语文';break;
    }
    obj.fav = fav;
    return obj;
}

repeat.repeatOuterHTML('.tpl_repeat_outer', json_list, maping); //循环outerHTML

{name}

{age}

{fav}

repeatNode


<div id="tpl_repeat_node">
    <div>{aa}</div>
    <div>{bb}</div>
    <div>{mm}</div>
    <div>
        <div class="cc">{n} : {v} : {mm}</div>
    </div>
    <div class="dd">
        <div>{d1}</div>
        <div>{d2}</div>
        <div>{mm}</div>
        <div class="d3">{x} : {y} : {mm}</div>
    </div>
</div>

javascript:

let repeat = new zbRepeat();
let json_nest_list = [{
        'aa' : 'aa',
        'bb' : 'bb',
        'mm' : '1',
        'cc' : [
            {'n': 'n1', 'v' : 'v1', 'mm' : '2' },
            {'n': 'n2', 'v' : 'v2', 'mm' : '2' },
            {'n': 'n3', 'v' : 'v3', 'mm' : '2' },
        ],
        'dd' : {
            'd1' : 'd1',
            'd2' : 'd2',
            'd3' : [
                {'x' : 'x1', 'y': 'y1', 'mm': '4'},
                {'x' : 'x2', 'y': 'y2', 'mm': '4'},
                {'x' : 'x3', 'y': 'y3', 'mm': '4'},
            ],
            'mm' : '3'
        }
    }];
let node = document.getElementById('tpl_repeat_node');
let html = repeat.repeatNode(node, json_nest_list);
nodel.innerHTML = html;

{aa}

{bb}

{mm}

{n} : {v} : {mm}

{d1}

{d2}

{mm}

{x} : {y} : {mm}