Блог

Я использую библиотеку подчеркивания для заполнения моего шаблона. Это работает как шарм, когда моя переменная day находится внутри тега. как этот фрагмент из моего кода:

     <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-коде отображались переменные, скажем, в теге заголовка переменная day, как показано ниже:

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

Браузер отображает

<%- day%>

вместо значения переменной. Вы знаете, что я делаю не так?

Проблема связана со строкой, которую вы передаете _.template() : HTML, который вы читаете из DOM, не имеет <%- day%> , но amp;<%- dayamp;> . Это связано с тем, что < имеет особое значение в 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>