用于填充模板的下划线 javascript 库

Question

我正在使用下划线库来填充我的模板。当我的可变日期在标签内时，它就像一个魅力。喜欢我代码中的这个片段：

    <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 代码显示变量时，问题就来了，比如在 header 标记变量日，如下所示：

<template>
<h1> <%- day%> </h1>
</template>

浏览器显示

<%-天%>

而不是变量的值。你知道我做错了什么吗？

Answer 1

问题在于您传递给 _.template() 的字符串：您从 DOM 读取的 HTML 没有 <%- day%>，但是 [=14] =].这是因为<在HTML中有特殊的含义，这里不代表标签，而是用HTML实体编码的。 >.

也是如此

对此有多种解决方案。一种是不在 HTML 中使用模板元素，而是在代码中使用字符串文字。但是，如果您更喜欢坚持使用模板元素（这是合理的），那么您可以将模板内容变成 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>

用于填充模板的下划线 javascript 库

Underscore javascript library to populate a template

javascript

html

underscore.js