是否可以创建嵌套的underscorejs模板？

Question

我一直在搜索如何在下划线中创建嵌套模板，即使在underscore docs我也没有运气。我相信handlebars可以嵌套模板。

您看到我有以下模板

<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>

Sub 1 Template - 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>

Sub 2 Template - 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>

谢谢！