我一直在寻找如何在下划线中创建嵌套模板,即使在下划线文档中我也没有运气。我相信在把手中嵌套模板是可能的。
你看我有以下模板
<script type="text/template" id="tmpl_web_results">
<% _.each(data, function(result) { %>
<% var answers = $.parseJSON(result.answer); %>
<tr>
<td><%= result.id %></td>
<td>
<ul>
<% _.each(answers, function(answer, key) { %>
<li><%= key %> - <%= answer%></li>
<% }) %>
</ul>
<div class="dialog" id="dialog_<%= result.id %>">
<table class="tbl_dialog">
<colgroup>
<col width="30%"></col>
<col width="70%"></col>
</colgroup>
<thead>
<tr>
<th>Details of ID <%= result.id %><th>
</tr>
</thead>
<tbody>
<% _.each(answers, function(answer, key) { %>
<tr>
<th><%= key %></th>
<td>
<% if(checkAnswerType(answer) == 'image') { %>
<img src="<%= answer %>" style="width:300px;height:250px;"/>
<% } else if(checkAnswerType(answer) == 'video') {%>
<video width="300" height="250" controls>
<source src="<%= answer %>" type="video/mp4">
Your browser does not support the video tag.
</video>
<% } else if(checkAnswerType(answer) == 'youtube') {%>
<iframe width="300" height="250" src="//www.youtube.com/embed/<%= getYoutubeId(answer) %>?rel=0" frameborder="0" allowfullscreen></iframe>
<% } else {%>
<%= answer %>
<% } %>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</td>
<td class="result_status"><%= result.status %></td>
<td>
<p>
<% if(result.status == 'accepted') { %>
<button class="btn_result_unpublish" data-id="<%= result.id %>">Unpublish</button>
<% } else { %>
<button class="btn_result_publish" data-id="<%= result.id %>">Publish</button>
<% } %>
</p>
<p><button class="btn_result_details" data-id="<%= result.id %>">Details</button></p>
</td>
</tr>
<% }) %>
</script>
JS
var item = _.template($('#tmpl_web_results').html(), result);
如您所见,模板又长又丑。如果有可能将其分解,那么这些事情将更易于维护。
主模板 - tmpl_web_results
<script type="text/template" id="tmpl_web_results">
<% _.each(data, function(result) { %>
<% var answers = $.parseJSON(result.answer); %>
<tr>
<td><%= result.id %></td>
<td>
<ul>
<% _.each(answers, function(answer, key) { %>
<li><%= key %> - <%= answer%></li>
<% }) %>
</ul>
// Call tmpl_web_results_sub_1
// Render Here
</td>
<td class="result_status"><%= result.status %></td>
<td>
// Call tmpl_web_results_sub_2
// Render Here
</td>
</tr>
<% }) %>
</script>
子 1 模板 - tmpl_web_results_sub_1
<script type="text/template" id="tmpl_web_results_sub_1">
<div class="dialog" id="dialog_<%= result.id %>">
<table class="tbl_dialog">
<colgroup>
<col width="30%"></col>
<col width="70%"></col>
</colgroup>
<thead>
<tr>
<th>Details of ID <%= result.id %><th>
</tr>
</thead>
<tbody>
<% _.each(answers, function(answer, key) { %>
<tr>
<th><%= key %></th>
<td>
<% if(checkAnswerType(answer) == 'image') { %>
<img src="<%= answer %>" style="width:300px;height:250px;"/>
<% } else if(checkAnswerType(answer) == 'video') {%>
<video width="300" height="250" controls>
<source src="<%= answer %>" type="video/mp4">
Your browser does not support the video tag.
</video>
<% } else if(checkAnswerType(answer) == 'youtube') {%>
<iframe width="300" height="250" src="//www.youtube.com/embed/<%= getYoutubeId(answer) %>?rel=0" frameborder="0" allowfullscreen></iframe>
<% } else {%>
<%= answer %>
<% } %>
</td>
</tr>
<% }) %>
</tbody>
</table>
</div>
</script>
子 2 模板 - tmpl_web_results_sub_2
<script type="text/template" id="tmpl_web_results_sub_2">
<p>
<% if(result.status == 'accepted') { %>
<button class="btn_result_unpublish" data-id="<%= result.id %>">Unpublish</button>
<% } else { %>
<button class="btn_result_publish" data-id="<%= result.id %>">Publish</button>
<% } %>
</p>
<p><button class="btn_result_details" data-id="<%= result.id %>">Details</button></p>
</script>
谢谢!