ES6模板字符串中th:each不生效的处理方法

ES6模板字符串

模板字符串以·开头,比以前字符串拼接要方便
以前写

"He is <b>"+person.name+"</b>"+"and we wish to know his"+person.age+".That is all" 

用模板写

 `He is <b>${person.name}</b>and we wish to know his${person.age}.that is all`

通过${}来取值,代替之前的拼接

与EL表达式$ 符号冲突

`<tr><td>${name}</td></tr>`

在模板字符串里,这样用$取值会出问题,需要用\${}

th:each在模板字符串里不生效

在正常的页面中,使用th:each

 <div class="layui-input-block">
                        <select name="orgRank" id="orgRank" required lay-verify="required">
                            <option value="">选择...</option>
                            <th:block th:each="s:${labels}">
                                <option th:value="${s.codeValue}" th:text="${s.codeName}"></option>
                            </th:block>
                        </select>
                    </div>

controller传值

 model.addAttribute("labels",codeService.findCodesByCodeGroupName("hosp_label"));

传的是一个List对象数组

List<ComCodeEntity>

这样前台页面可以通过th:each解析
但是如果这个th:each放在模板字符串里,就会取不到值,我尝试了很多办法,包括上边提到的\$都没有成功,最后只能通过js赋值,如果有哪个大佬有好的解决方法,麻烦告知一下
对应的模板字符串

 let html = ` <fieldset id="dynamic-line-${idRecord}" class="layui-elem-field" id="cancelInfoDiv1" >
                            <legend>癌症信息${idRecord}</legend>

                            <div class="layui-form-item" style="margin-left: 1rem;">
                               

                                <div id="checkICDO3${idRecord}" style="display: none;">
                                    <div class="layui-form-item">
                                        <div class="layui-inline upDown">
                                            <label class="layui-form-label">解剖学编码:</label>
                                            <div class="layui-input-block">

                                            <select name="planingCoding${idRecord}" id="planingCoding${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>

                                             </select>
                                            </div>
                                        </div>

                                        <div class="layui-inline upDown">
                                            <label class="layui-form-label">形态学编码:</label>
                                            <div class="layui-input-block">
                                              <select name="morphologicalCoding${idRecord}" id="morphologicalCoding${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>

                                             </select>
                                             </div>
                                        </div>
                                        <div class="layui-inline upDown">
                                            <label class="layui-form-label">行为学编码:</label>
                                            <div class="layui-input-block">
                                             <select name="behavioralCoding${idRecord}" id="behavioralCoding${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>

                                             </select>

                                            </div>
                                        </div>
                                        <div class="layui-inline upDown">
                                            <label class="layui-form-label">分级:</label>
                                            <div class="layui-input-block">
                                             <select name="cd03${idRecord}" id="cd03${idRecord}" lay-verType="tips" lay-verify="otherReq" lay-search>

                                             </select>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                               
                              <div class="layui-form-item">
                            <div class="layui-row" style="text-align: center;">
                                <a id=${idRecord} class="layui-btn relation">删除</a>
                            </div>
                        </div>
                        </fieldset>`;

                $('#dynamic-table').append(html);

给解剖学编码,形态学编码等几个select 进行动态赋值,从后台获取数据

  						<input id="jpxbm" name="jpxbm" type="hidden" th:value="${jpxbm}">
                        <input id="xtxbm" name="xtxbm" type="hidden" th:value="${xtxbm}">
                        <input id="xwxbm" name="xwxbm" type="hidden" th:value="${xwxbm}">
                        <input id="fjbm" name="fjbm" type="hidden" th:value="${fjbm}">
                        <input id="icd10bm" name="icd10bm" type="hidden" th:value="${icd10bm}">
			

	 assembleRadioViews($("#jpxbm"), $("#planingCoding" + idRecord))
                assembleRadioViews($("#xtxbm"), $("#morphologicalCoding" + idRecord))
                assembleRadioViews($("#xwxbm"), $("#behavioralCoding" + idRecord))
                assembleRadioViews($("#fjbm"), $("#cd03" + idRecord))
                assembleRadioViews($("#icd10bm"), $("#icd10" + idRecord))

 function assembleRadioViews(jsonView,radioView){
            var labelValue=JSON.parse(jsonView.val())
            //给select赋值
            for(let i=0;i<labelValue.length;i++){
                console.log(labelValue[i])
                var value=labelValue[i].codeValue
                var name=labelValue[i].codeName
                radioView.append(`<option value='${value}'>${name}</option>`);
            }
        }

controller传数据要处理一下,不能传递对象List了,因为不用th:each,不好解析,需要变成json字符串


 @Autowired
    private ObjectMapper objectMapper;
   model.addAttribute("jpxbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("jpxbm")));
            model.addAttribute("xtxbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("xtxbm")));
            model.addAttribute("xwxbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("xwxbm")));
            model.addAttribute("fjbm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("fjbm")));
            model.addAttribute("icd10bm",objectMapper.writeValueAsString(codeService.findCodesByCodeGroupName("icdbm")));

select取值和赋值
$(’#planingCoding’ + i).val(),//取值
$("#planingCoding" + idRecord).val(d.planingCoding);//赋值

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值