通过ajax加载时下划线模板抛出错误答案

【问题标题】：Underscore template throwing error when loading via ajax通过ajax加载时下划线模板抛出错误
【发布时间】：2013-06-14 02:07:02
【问题描述】：

我正在使用下划线将 JSON 数据转换为模板：

$(document).ready(function(){
    var template = $("#furniture-template").html();
        $furnitureList = _.template(template, {things: things});
});

在进行正常的页面刷新时，它可以正常加载并且工作正常。但是当通过 ajax 加载页面时（使用 history.js 和 ajaxify.js）我得到两个错误：

Error: SyntaxError: syntax error
Source Code: <% _.each(things,function(thing,key,list){ %>

和

Error: TypeError: n is undefined
Source File: http://192.168.0.20:8888/metropolis/library/themes/metropolis/assets/js/plugins/underscore.js

下面是模板脚本。

有没有人遇到过这样的下划线错误？我应该如何调试这个，或者如果有人能指出我在这里做错了什么，那就太好了。

谢谢！

            <script type="text/html" id='furniture-template'>
                <div class="accordion collapse">
                    <div class="accordion-group">
                        <% _.each(things,function(thing,key,list){ %>

                        <div class="accordion-heading">
                            <a class="accordion-toggle ic-minus block collapsed" data-toggle="collapse" href="#things-<%= thing.slug %>">
                                <%= thing.title %>
                            </a>
                        </div> <!-- header -->

                        <div id="things-<%= thing.slug %>" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <% for(var item in thing.items) { %>
                                <div class="item">
                                    <% if( thing.items[item].images == true ) { %>
                                        <a data-target="<%= thing.items[item].slug %>-gal" class="img-link ic-cam fl" title="View an example"></a>
                                    <% } %>

                                    <a 
                                        class="item-add ic-plus" 
                                        data-title="<%= thing.items[item].title %>" 
                                        data-slug="<%= thing.items[item].slug %>"
                                        data-img="<%= thing.items[item].images %>"
                                        data-shorthand="<%= thing.items[item].shorthand %>"
                                        data-price="<%= thing.items[item].price %>"
                                    >
                                        <%= thing.items[item].title %>
                                    </a>
                                </div>
                                <% } %>
                            </div> <!-- inner -->
                        </div> <!-- accordion-body -->  


                    <% }); %>
                    </div>
                </div>
            </script>

【问题讨论】：

顺便说一句，type="text/html" 是一个可能会给您带来麻烦的谎言，您应该使用text/x-underscore 以确保浏览器会保留您的模板。

标签： javascript jquery templates backbone.js underscore.js

【解决方案1】：

ajaxify 脚本在 ajax 成功时异步加载脚本。问题是它正在创建一个没有type 或id 属性的<script> 节点。

这里是 ajaxify.js 的修改后的脚本摘录

// Add the scripts
$scripts.each(function(){
    var $script = $(this), 
        scriptText = $script.text(),
        scriptType = $script.attr('type'),
        scriptId = $script.attr('id');

    scriptNode = document.createElement('script');

    if(scriptType) {
        $(scriptNode).attr('type', scriptType);
    }

    if(scriptId) {
        $(scriptNode).attr('id', scriptId);
    }

    scriptNode.appendChild(document.createTextNode(scriptText));
    contentNode.appendChild(scriptNode);
});

【讨论】：