ejs 模板引擎的使用

1.ejs模板，简单一点就是js中嵌入模板标签，html中写入js之类的

一 模板嵌套渲染：

<div class="package-detail-container">
    <div class="no-data">暂无数据</div>
</div>

//调用接口数据在js中渲染
function renderPackage(list) {
    if (list.length > 0) {
        var nodeList = `${
            list.map((item, index) => {
                return `
                    <div class="detail-item ${index === 0 ? 'first-item' : `${index === list.length - 1 ? 'last-item' : ''}`}">
                        <div class="item-title">${item.offerName}</div>
                        <div class="item-content">
                            <div class="validDate">
                                <span>生效日期：</span>
                                ${item.validDate}
                            </div>
                            <div class="expireDate">
                                <span>有效期至：</span>
                                ${item.expireDate}
                            </div>
                        </div>
                    </div>
                `
            }).join('')
        }`
        $('.package-detail-container').html(nodeList)
    }
}
```
```
var  opop = `
```
<div class="thaw-result">
    <span class="thaw-arrears">累计欠费:</span>
    <span class="${node.oweFee !== '0' ? 'thaw-first' : 'thaw-color'}">${node.oweFee !== '0' ? `${(node.oweFee / 100).toFixed(2)}元` : '无'}</span>
    ${ node.oweFee !== '0' ? arrearsImg(node) : ''}

</div>
```
```
function arrearsImg(node){
  return `
         <img  class="${(node.damagesFeeStatus || node.oweFeeStatus) !== '' ? 'thaw-btn' : 'thaw-pay'}"
               src="${(node.damagesFeeStatus || node.oweFeeStatus) !== '' ? doing : isPay}" alt=""/>
`
}
```

*tap切换渲染**
````
<div class="tabs"></div>
````

//渲染
function renderMonths(monthsList) {
    var nodeList = `${
        monthsList.map(function(item, index) {
            return `
                <div class="tabs-item click-btn ${index === 0 ? 'tab-active' : ''}">
                    <div class="date-year">${item.year}</div>
                    <div class="date-month">${item.month}月</div>
                    <div class="bottom-line"></div>
                </div>
            `
        }).join('')
    }`
    $('.tabs').html(nodeList)
}

//交换
function bindEvents() {
    $('.tabs-item').on('click', function() {
        var index = $(this).index()
        // 当前选中月份高亮
        $('.tabs-item').eq(pageData.tabActiveIndex).removeClass('tab-active')
        $('.tabs-item').eq(index).addClass('tab-active')
        pageData.tabActiveIndex = index
        //  输入内容
        queryRequest()
    })
}
```
```