lodash _.template()方法的使用

最新推荐文章于 2024-08-22 17:38:39 发布

影子信息

最新推荐文章于 2024-08-22 17:38:39 发布

阅读量258

点赞数 3

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/weixin_45024453/article/details/139992686

版权

背景：

使用_.template()生成对应数据的对应html代码

核心代码：

        //定义一个变量来装finalHtml 
        var finalHtml = ''       
        //1.模版        
        compiled = _.template(
        [
          '<span class="${clazz}" index="${index}"             
            style="background:${bgColor};color:${color};position:relative;"',
          ' fontcolor="${color}"  bgcolor="${bgColor}">',
          '${title}',
          '</span>',
        ].join('')
        )
      var para = {
        clazz: ['class1', 'class2'].join(' '),
        index: index,
        bgColor: bgColor,
        color: color,
        title: title,
        i18n_text: i18n_text
      }
      //拼接
      finalHtml += compiled(para)

其它，数据形式如下：


        { 
          index:0,
          title: '1年内',
          minVal:0,
          maxVal:1,
          color: '#000',
          bgColor:'rgba(1,255,1,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_0Year',
        },
        { 
          index:3,
          title: '1~2年',
          minVal:1,
          maxVal:2,
          color: '#000',
          bgColor: 'rgba(255,255,0,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_1Year',
        },
        { 
          index:2,
          title: '2~3年',
          minVal:2,
          maxVal:3,
          color: '#000',
          bgColor: 'rgba(255,192,0,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_2Year',
        },
        { 
          index:1,
          title: '3年以上',
          minVal:3,
          maxVal:100,
          color: '#fff',
          bgColor: 'rgba(214,20,21,.7)',
          layerGroupName:'测量时间类型',
          isgroup:'yes',
          notCreate: false,
          mutexGroup: 'tc_Depth',
          checked: true,
          i18n_text: 'tc_MeasuringTimePlane_3Year',
        },