在我的jQuery / js中加入下划线模板

时间:2016-04-03 00:45:45

标签: javascript templates underscore.js

我已经阅读了关于下划线和模板的所有帖子,但似乎无法实现简单的操作。我的html中的内联<script>标记中没有该模板。我只想用js脚本声明模板,该脚本从API获取数据。

我想说的是:

<script type="text/template" id="eventView">
    <div class="table-tour">
        <% _.each(collection, function( model, id ) { %>
        <div class="row">
            <div class="cell date"><% var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
            var str = model.datetime;  
            var dateArr = str.substring(0, str.indexOf("T")).split("-");                    
            var month = parseInt(dateArr[1],10);
            var day = parseInt(dateArr[2],10);
            print(monthNames[month-1] + " " + day); %></div>
            <div class="cell location"><%= model.formatted_location %></div>
            <div class="cell venue"><%= model.venue.name %></div>
            <div class="cell actions"><% if (model.ticket_status == "available") { %>
            <span><a href="<%= model.ticket_url %>" target="_blank">Tickets</a></span> <% } %>
            </div>
        </div>
        <% }); %>
    </div>
</script>

在这里:

// Display all dates:
var content;
if (data.length > 0)
    content = _.template( $( "script#eventView" ).html(), { "collection": data } );
else
{
    var notifyUrl = "http://www.bandsintown.com/" + artistName;
    content = "<p class='notify'>No " + mode + " dates. <a href='" + notifyUrl + "' target='_blank'>Notify me when " + artistName + " comes to my area.</a></p>";
}

$("#tour-dates").html(content);            

我一直试图将其添加到:

_.template( $( "script#eventView" ).html(), { "collection": data } );

但失败了。

想知道是否有人有小费。

谢谢。

1 个答案:

答案 0 :(得分:0)

您的意思是在您的HTML中存储ejs(或某些自定义)模板。你不能直接这样做。当浏览器试图解析时,它将无法识别其格式,因为它不支持ejs(或任何自定义模板)格式。您可以将其转义值存储在javascript变量或数据属性中。但为了便于阅读,我不建议这样做。

你可能应该在javascript中调用ajax来获取该模板。如果你想要预取它,那么只需在脚本标记中调用ajax来获取它并将该模板存储在javascript变量中的某些位置。

如果该模板语言是ejs,您可以使用http://www.embeddedjs.com/插件。