art-template.js关于checkbox、radio选中后返回数据如何渲染

假如我们有一个多选和单选列表, 图片我们从后端拿到数据后想在初始化的时候按照数据的值进行渲染，是选中的就显示选中状态，没有选中的就显示默认状态, 假如这是我们拿到的数据（理想中的数据应该是这样的）,如下：

[
    { "code": "1", "name": "语文", "content": "1", "checked": false },
    { "code": "2", "name": "数学", "content": "2", "checked": true },
    { "code": "3", "name": "英语", "content": "3", "checked": true },
    { "code": "4", "name": "物理", "content": "4", "checked": false }
]

那么就很简单的了，就可以直接进行数据渲染，如下： html

<div class="form-check" id="formCheckBox"></div>

res = [
    { "code": "1", "name": "语文", "content": "1", "checked": false },
    { "code": "2", "name": "数学", "content": "2", "checked": true },
    { "code": "3", "name": "英语", "content": "3", "checked": true },
    { "code": "4", "name": "物理", "content": "4", "checked": false }
]
document.getElementById('formCheckBox').innerHTML = template('checkboxTemp', { data: res });

template

<script type="text/html" id="checkboxTemp">
{{each data item}}
<label for="checkbox{{item.code}}">
    <input class="form-check-input" type="checkbox" id="checkbox{{item.code}}" value="{{item.content}}" {{if item.checked == true}}checked{{/if}}> {{item.name}}
</label>
{{/each}}
</script>

如果拿到的数据是乱七八糟的后端给出来的怎么办，那我就需要处理一下数据，如下：

{"data": [
    { "code": "1", "name": "语文", "content": "1" },
    { "code": "2", "name": "数学", "content": "2" },
    { "code": "3", "name": "英语", "content": "3" },
    { "code": "4", "name": "物理", "content": "4" }
    ],
"select": [1, 4]
}

如果是这种的话我们就先渲染，然后再用JQ的each循环改变选中状态，如下： html

<div class="form-check" id="formCheckBox"></div>

res = {
    "data": [
        { "code": "1", "name": "语文", "content": "1" },
        { "code": "2", "name": "数学", "content": "2" },
        { "code": "3", "name": "英语", "content": "3" },
        { "code": "4", "name": "物理", "content": "4" }
    ],
    "select": [1, 4]
};
document.getElementById('formCheckBox').innerHTML = template('tpl', { data: res.data });
$('#formCheckBox label').each(function() {
    var cont = $(this).find('input').val();
    for (var i = 0; i < check.value.length; i++) {
        if (check.select[i] == val) {
            $(this).find('input').prop('checked', true)
        }
    }
})

template

<script type="text/html" id="tpl">
    {{each data}}
    <label for="checkbox{{$value.code}}">
    <input class="form-check-input" type="checkbox" id="checkbox{{$value.code}}" value="{{$value.content}}"> {{$value.name}}</label>
    {{/each}}
</script>

后记：其实拿到的数据基本上如果可以直接用的话就不必处理，但是有的数据是需要重新处理重新组合成我们用的那种结果，比如上面最后一个例子提到的，他有两个checkbox被选中，但是我们渲染的时候会用data数据渲染，那么你可以把select的两标记组合到data里面，如:

res = { 
    "data": [
        { 
            "code": "1", 
            "name": "语文", 
            "content": "1", 
            "select": true// 这个就是标记被选中
        },
        ....
    ]
}

这样就可以直接渲染数据了，方法有很多种，就看你怎么理解，想怎么用