下划线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>

html javascript underscore.js