如何解决下划线JavaScript库以填充模板
我正在使用下划线库填充模板。 当我的可变日期在标签内时,它就像一种魅力。就像我的代码中的这段代码一样:
<template>
<label>Schedule</label>
<select class="form-control" onchange="set_from_hour('<%=day%>')" name="some_name" id="<%=day%>from_hour" >
<option value=0 selected='selected'>00</option>
<option value=1>01</option>
...
</template>
要填充此模板,请使用以下功能:
days_schedule = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday']
function show_schedule_week(){
_.each(days_schedule,function(day){
_.templateSettings.variable = 'day'
var template = _.template($('template').html())
console.log(day+'_schedule')
$('#'+day+'_schedule').prepend(template(day))
})
}
现在,当我希望我的HTML代码显示变量时出现问题,例如在标题标签中说出变量天,如下所示:
<template>
<h1> <%- day%> </h1>
</template>
浏览器显示
代替变量的值。 你知道我在做什么错吗?
解决方法
问题出在传递给_.template()
的字符串上:从DOM读取的HTML没有<%- day%>
,而是<%- day>
。这是因为<
在HTML中具有特殊含义,并且由于此处不表示标签,因此它是用HTML实体编码的。 >
也是如此。
对此有几种解决方案。一种是不要在HTML中使用模板元素,而在代码中使用字符串文字。但是,如果您希望坚持使用template元素(这是合理的),则可以将模板内容转换为HTML注释。
这里是一个例子:
days_schedule = ['monday','tuesday','wednesday','thursday','friday','saturday','sunday']
function show_schedule_week() {
_.each(days_schedule,function(day){
_.templateSettings.variable = 'day'
// unwrap the template content by removing the HTML comment tag start/end
var template = _.template($('template').html().slice(4,-3));
$('#'+day+'_schedule').prepend(template(day))
})
}
show_schedule_week();
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.11.0/underscore-min.js" integrity="sha512-wBiNJt1JXeA/ra9F8K2jyO4Bnxr0dRPsy7JaMqSlxqTjUGHe1Z+Fm5HMjCWqkIYvp/oCbdJEivZ5pLvAtK0csQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<template><!--
<h3> <%- day%></h3>
--></template>
<div id="monday_schedule"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。