artTemplate 是js的一个模板，在页面调用api接口的时候，渲染数据很有帮助，有了它，事半功倍，但是需要学习成本。

今天我们在项目中使用了这个模板，记录一下

这里有两篇非常不错的文档，记录下来，方便以后查看

https://www.jianshu.com/p/b5dffff259be

https://www.jianshu.com/p/e7f3d0c93ed3

artTempplate 使用封装插件 这样更加方便便捷

define(['template'], function (require, exports, module) {

    var template = require('template');
    //模板中使用的方式：
    // {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

    template.helper('formatdate', function (date, format) {
        return formatDate(date * 1000, format);
    });

    template.helper('str_repeat', function (num, repeatStr) {
        return repeatStr.repeat(num);
    });


    template.helper('isempty', function (str) {
        return isUndefined(str) || str.length == 0 ? true : false;
    });

    template.helper('empty_replace', function (val, repeatStr) {
        if (isUndefined(val) || val == '')
            val = repeatStr;

        return val;
    });

    template.helper('str_replace', function (str, findStr, replace) {
        return str.replace(new RegExp(findStr, 'gmi'), replace);
    });

    //判断是否有问号   {{time | has_wenhao}}
    template.helper('has_wenhao', function (str) {
        if (str.indexOf('?') >= 0) {
            return str + '&';
        } else {
            return str + '?';
        }
    });


    /*template.helper('paidStatusText', function (data) {
        if(data == 'PAYING'){
            return "<div style='color:#488ffa;'>付款中</div>";
        }else if(data == 'UNPAY'){
            return "<div style='color:#ff6666;'>未付款</div>";
        }else if(data == 'PAID'){
            return "<div style='color:#55be97;'>已付款</div>";
        }
    });*/

    //支持传入参数与嵌套使用：
    // {{time | say:'cd' | ubb | link}}

    /**
     * 模板封装
     * @param id 模板id 必须是id 不能是class 或其他
     * @param data 一个对象
     * @param inserContainer 要插入的位置 如果没有传递，则返回模板渲染好的内容
     *
     * @param callback
     * @returns {*}
     */
    exports.template = function (id, data, inserContainer, callback) {
        var html = template(id, data);
        if (inserContainer === undefined)
            return html;
        else {
            if (typeof(inserContainer) === 'string') {
                $(inserContainer).html(html);
            } else if (typeof(inserContainer) === 'object') {
                $(inserContainer.distview, inserContainer.parentObj).html(html);
            }
        }

        if (callback != undefined)
            callback();

    };


    /**
     * 动态获取数据模板显示，为了解决整个页面刷新
     * @param file
     * @param data
     * @param inserContainer 如果是一个对象，则获取里面中的值
     * @param callback
     * @returns {*}
     */
    exports.renderfile = function (file, data, inserContainer, callback) {
        var templateContent = '';
        $.ajax({
            url: file,
            async: false,
            success: function (htmldata) {
                templateContent = htmldata;
            }
        });

        var reader = template.compile(templateContent);
        var html = reader(data);
        if (inserContainer === undefined) {
            return html;
        } else {
            if (typeof(inserContainer) === 'string') {
                $(inserContainer).html(html);
            } else if (typeof(inserContainer) === 'object') {
                $(inserContainer.distview, inserContainer.parentObj).html(html);
            }
        }

        if (callback != undefined)
            callback();
    };


})

封装arttemplate方法

  define(['template'], function (require, exports, module) {

      var template = require('template');   
     template.helper('formatdate', function (date, format) {
        return formatDate(date * 1000, format);
    });
    
  });

模板中使用formate函数

{{each dataList.list as value}}
<tr class="text-c">
    <td><input type="checkbox" value="{{value.id}}" name=""></td>
    <td>{{value.id}}</td>
    <td>{{value.username}}</td>
    <td>{{value.fullname}}</td>
    <td>{{value.mobile}}</td>
    <td>{{if value.status==1}}<span class="label label-success radius">启用</span> {{else}}<span
            class="label label-danger radius">禁用</span> {{/if}}
    </td>
    
    
    <!--这里 就是 使用 formatdate 的方法-->
    <td>{{ if value.last_logintime==0}}-{{else}} {{ value.last_logintime |formatdate }} {{/if}}</td>
    
    <!--还可以这样使用--》
    <td>{{ if value.last_logintime==0}}-{{else}} {{ formatdate(value.last_logintime)}} {{/if}}</td>
    
    
    <td>{{value.updatetime}}</td>
    <td>{{value.createtime}}</td>

if判断

 {{if namesArry.length > 14}} 
     <div style="position: absolute;left: 933px;top: 25px;">
        <span>……</span>
    </div> 
    {{/if}}
    
  {{if namesArry.length > 14}} 
     <div style="position: absolute;left: 933px;top: 25px;">
        <span>……</span>
    </div> 
  {{else}}
  
    不大于14个
  
  
 {{/if}}

使用template.js 

var jsTemplate = require('module/common/template');

var html = jsTemplate.template('form_data', data, '#form_data_container', function () {
        
        
     //这里是一个回调函数 做你想做的事情
     
    //判断有没有 checkbox  radio
    var iCheck = false;
    projectCommon.iCheck();
    var column = responseData.column;
    for (var obj in column) {

        value = column[obj];

        if (value.input_type == 'color') {
            exports.color('#' + value.input_name);
        } else if (value.input_type == 'date') {
            projectCommon.datetime(value.input_name, 'date');
        } else if (value.input_type == 'datetime') {
            projectCommon.datetime(value.input_name, 'datetime');
        } else if (value.input_type == 'start2end_datetime') {
            projectCommon.datetime(value.input_name, 'date', true);
        } else if (value.input_type == 'simple_html_text') {
            exports.setEditor(value.input_name, 'simple');
        } else if (value.input_type == 'html_text') {
            exports.setEditor(value.input_name, 'all');
        }

        //将php 验证转换为js验证
        var validatetype = value.validate_type;
        validatetype = validatetype.trim('\\|', '');

        var _tempAutoCheckRules = {};
        var _tempAutoCheckMessage = {};

        if (validatetype != '') {
            if (validatetype.indexOf('|') >= 0) {

                var validatetypeAttr = validatetype.split('|');
                var validatetypeAttrLength = validatetypeAttr.length;

                var validateMessageAttr = (value.validate_message).split('|');



                for (var q = 0; q < validatetypeAttrLength; q++) {
                    var _tempVal = validatetypeAttr[q];
                    _tempAutoCheckRules[php_js_validateRelation[_tempVal]] = true;
                    _tempAutoCheckMessage[php_js_validateRelation[_tempVal]] = isUndefined(validateMessageAttr[q]) ? validateMessageAttr[0] : validateMessageAttr[q];
                }
                autoCheckRules[value.input_name] = _tempAutoCheckRules;
                autoCheckMessage[value.input_name] = _tempAutoCheckMessage;

            } else {

                _tempAutoCheckRules[php_js_validateRelation[validatetype]] = true;
                _tempAutoCheckMessage[php_js_validateRelation[validatetype]] = value.validate_message;

                autoCheckRules[value.input_name] = _tempAutoCheckRules;
                autoCheckMessage[value.input_name] = _tempAutoCheckMessage;
            }
        }
    } 
});

if语句

{{if value.options_multi_type==0}}
-
{{else}}
    {{ each options_multi_typeList as label i}}
     {{if label.id == value.options_multi_type }} {{label.title}}{{/if}}
    {{ /each }}
{{/if}}


<!--if 语句可以写 或的关系  -->
{{ if(value.input_type=='html_text' || value.input_type=='simple_html_text')}}

arttemplate 提供变量赋值

{{if !dataval[value.input_name] }}
<input name="{{value.input_name}}" type="checkbox" value="{{label.id}}"
       id="{{value.input_name}}-{{label.id}}" {{if label.id== dataval[value.input_name] }} checked
       {{/if}} >
{{else}}
<input name="{{value.input_name}}" type="checkbox" value="{{label.id}}"
       id="{{value.input_name}}-{{label.id}}" {{if label.id== value.default_value }} checked {{/if}}
>
{{/if}}

动态读取 value.input_name 的值 ，然后 从 dataval中获取

dataval[value.input_name]

var data = {
    'column': responseData.column,
    'dataval': isUndefined(responseData.value) ? {} : responseData.value,
    'fun': fun
};

var html = jsTemplate.template('form_data', data, '#form_data_container', function () {

    //判断有没有 checkbox  radio
    var iCheck = false;
    projectCommon.iCheck();
    var column = responseData.column;
    for (var obj in column) {

        value = column[obj];

        if (value.input_type == 'color') {
            exports.color('#' + value.input_name);
        } else if (value.input_type == 'date') {
            projectCommon.datetime(value.input_name, 'date');
        } else if (value.input_type == 'datetime') {
            projectCommon.datetime(value.input_name, 'datetime');
        } else if (value.input_type == 'start2end_datetime') {
            projectCommon.datetime(value.input_name, 'date', true);
        } else if (value.input_type == 'simple_html_text') {
            exports.setEditor(value.input_name, 'simple');
        } else if (value.input_type == 'html_text') {
            exports.setEditor(value.input_name, 'all');
        }

        //将php 验证转换为js验证
        var validatetype = value.validate_type;
        validatetype = validatetype.trim('\\|', '');

        var _tempAutoCheckRules = {};
        var _tempAutoCheckMessage = {};

        if (validatetype != '') {
            if (validatetype.indexOf('|') >= 0) {

                var validatetypeAttr = validatetype.split('|');
                var validatetypeAttrLength = validatetypeAttr.length;

                var validateMessageAttr = (value.validate_message).split('|');



                for (var q = 0; q < validatetypeAttrLength; q++) {
                    var _tempVal = validatetypeAttr[q];
                    _tempAutoCheckRules[php_js_validateRelation[_tempVal]] = true;
                    _tempAutoCheckMessage[php_js_validateRelation[_tempVal]] = isUndefined(validateMessageAttr[q]) ? validateMessageAttr[0] : validateMessageAttr[q];
                }
                autoCheckRules[value.input_name] = _tempAutoCheckRules;
                autoCheckMessage[value.input_name] = _tempAutoCheckMessage;

            } else {

                _tempAutoCheckRules[php_js_validateRelation[validatetype]] = true;
                _tempAutoCheckMessage[php_js_validateRelation[validatetype]] = value.validate_message;

                autoCheckRules[value.input_name] = _tempAutoCheckRules;
                autoCheckMessage[value.input_name] = _tempAutoCheckMessage;
            }
        }
    }
});

提供一个遍历的文档

namesArry = [{ studentName: studentNames, nameLast: studentNames.substr(studentNames.length - 1, 1) }]

　　var dom = $(template('selectedStudentsTemplate', { namesArry: namesArry }));
　　modal.find("#selectedStudents").append(dom);



<script id="selectedStudentsTemplate" type="text/html">
    {{each namesArry as item}}
    <div class="cicle">
        <span id="nameLast">{{item.nameLast}}</span>
        <span>{{item.studentName}}</span>
    </div>
    {{/each}}
    {{if namesArry.length > 14}} 
     <div style="position: absolute;left: 933px;top: 25px;">
        <span>……</span>
    </div> 
    {{/if}}
</script>