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

我使用下划线将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){ %> 

下面是模板脚本

有人有过类似下划线错误的经验吗？我应该如何调试这个，或者如果有人能指出我做错了什么，那就太好了

谢谢

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

---

ajaxify脚本在ajax成功时异步加载脚本。问题是，它正在创建一个

节点，而没有

类型

或

id

属性

下面是从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);
});

另一方面，

type=“text/html”

是一个可能会给您带来麻烦的谎言，您应该使用

text/x-下划线

，以确保浏览器能够控制您的模板。

// 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);
});