Question

我正在使用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>

Answer 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);

IE不附加Underscore生成的HTML

1 个答案: