IE 不附加下划线生成的 HTML答案

【问题标题】：IE does not append Underscore generated HTMLIE 不附加下划线生成的 HTML
【发布时间】：2013-06-07 08:56:14
【问题描述】：

我正在使用 jQuery 和下划线将 HTML 片段动态添加到我的页面。该代码适用于 Firefox 和 Chrome，但不适用于 IE。

谢谢！

<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<style>
table#uploads {
    width: 500px;
    border-spacing: 0;
    border-collapse: collapse;
}

table#uploads tr {
    width: 100%;
}

table#uploads td {
    width: 30px;
    border: 1px solid black;
}
</style>
<script type="text/template" class="template">
<% _.each(items, function(item) { %>
<tr>
    <td><%- item.reference %></td>
    <td><%- item.filename %></td>
    <td><%- item.size %></td>
    <td>
        <button>Delete</button>
    </td>
</tr>
<% }); %>
</script>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript">
_.templateSettings.variable = 'items';

var template = _.template(
        $('script.template').html()
);

function addUploads(result) {
    var itemCount = result['itemCount'];
    if (itemCount > 0) {
        var fragment = template(result['items']);
        var table = $('#uploads');
        table.append(fragment);
    }
}

$(function() {
    var result = {
            itemCount: 1,
            items: [
                    {
                        filename: 'image.jpg',
                        reference: 'SQ1.jpg',
                        size: '1 Kb'
                    }
            ]
    };

    addUploads(result);
});
</script>
</head>
<body>
    <table id="uploads">
    </table>
</body>
</html>

【问题讨论】：

你有什么错误吗？
没有错误！ HTML 片段生成正确，但周围有很多空格。

标签： javascript jquery internet-explorer templates underscore.js

【解决方案1】：

我通过制作内联模板解决了这个问题：

var source = "<% _.each(items, function(item) { %><tr><td><%= item.reference %></td><td><%= item.filename %></td><td><%= item.size %></td><td><button class='delete'>Delete</button></td></tr> <% }); %> ";
var template = _.template(source);

【讨论】：