Question

我对Underscore.js模板有一个非常时髦的问题。在IE 9的所有浏览器中，我使用的模板按设计生成HTML标记，但在IE 9中却没有。这是模板：

, manageColumnsTableTemplate: _.template(
'<td class="padss-glyphs">▣</td>' +
'<td><input type="text" size="1" data-key="<%=ID%>" name="sort" value="<%=SortOrder%>" /> <a class="up" data-key="<%=ID%>" data-sort="<%=SortOrder%>">up</a> <a class="down" data-key="<%=ID%>" data-sort="<%=SortOrder%>">down</a></td>' +
'<td><input type="checkbox" data-key="<%=ID%>" <% if(Display) {%>checked="checked" <%}%> /></td>' +
'<td><%=Value%></td>')

在FireFox，Safari和Chrome中，我得到了类似的内容：

<td class="padss-glyphs">?</td>
<td><input type="text" size="1" data-key="3" name="sort" value="3"> <a class="up" data-key="3" data-sort="3">up</a> <a class="down" data-key="3" data-sort="3">down</a></td>
<td><input type="checkbox" data-key="3" checked="checked"></td>
<td>INCUMBENT</td>

在IE 9中，我得到：

?
<input name="sort" value="4" size="1" type="text" data-key="3"> 
<a class="up" data-key="3" data-sort="4">up</a> 
<a class="down" data-key="3" data-sort="4">down</a>
<input CHECKED="checked" type="checkbox" data-key="3">
INCUMBENT

请注意，生成了TD元素的内容，但缺少TD开始和结束标记。我们使用jQuery选择器来获取TR中最后一个TD的文本。

以下是涉及的JavaScript：

for (i = 0; i < sortArray.length; i++) {
    if (!sortArray[i].readonly) {
        html = new ColumnDisplayView({
            model: sortArray[i],
            tagName: 'tr'
        }, that).$el;
        html.attr('data-key', sortArray[i].id);
        domFragment.find('tbody').append(html);
    } else {
        //this one is readonly... make a readonly array for laterz
        that.readOnlyArray.push(sortArray[i]);
    }
}

这是ColumnDisplayView.js文件：

    define([
       'modules/PadssView'
], function (PadssView) {
    return PadssView.extend({
        tagname: 'tr',
        initialize: function () {
            if (typeof this.model.toJSON !== 'undefined') {
                this.el.innerHTML = PADSS.manageColumnsTableTemplate(this.model.toJSON());
            } else {
                //not a model... coming in from the new preferences it seems
                this.model.ID = this.model.id;
                this.model.Display = this.model.visible;
                this.model.SortOrder = this.model.order;
                this.el.innerHTML = PADSS.manageColumnsTableTemplate(this.model);
            }
            return this;
        }
    });
});

这确实让我们感到难过，任何帮助都会受到高度赞赏。

感谢，

麦克

有人建议在ColumnDisplayView.js中将tagname更改为tagName可以解决问题。它根本不影响它。这是一些控制台输出：

>> __p 
"<td class="padss-glyphs">▣</td><td><input type="text" size="1" data-key="11" name="sort" value="3" /> <a class="up" data-key="11" data-sort="3">up</a> <a class="down" data-key="11" data-sort="3">down</a></td>
<td><input type="checkbox" data-key="11" checked="checked"  /></td>
<td>LEVEL</td>"

__ p是_.template（）返回的值，因此模板工作正常。

>> this.el.tagName 
"TR"

el.tagName是TR，所以添加_.template（）输出应该没问题。

>> this.el.innerHTML 
"▣<input name="sort" value="3" size="1" type="text" data-key="11"> <a class="up" data-key="11" data-sort="3">up</a> <a class="down" data-key="11" data-sort="3">down</a>
<input CHECKED="checked" type="checkbox" data-key="11">
LEVEL"

当_.template（）输出分配给el.innerHTML时，TD标签被剥离。

Answer 1

您应该在列显示View.jsp>中将tagname替换为tagName

Answer 2

感谢Jan的回复。我终于通过使用jQuery设置元素的内部html来解决问题。这是有效的代码。

define([
       'modules/PadssView'
], function (PadssView) {
    return PadssView.extend({
        tagName: 'tr',
        initialize: function () {
            var html;
            if (typeof this.model.toJSON !== 'undefined') {
                html = PADSS.manageColumnsTableTemplate(this.model.toJSON());
            } else {
                //not a model... coming in from the new preferences it seems
                this.model.ID = this.model.id;
                this.model.Display = this.model.visible;
                this.model.SortOrder = this.model.order;
                html = PADSS.manageColumnsTableTemplate(this.model);
            }

            $(this.el).html(html);

            return this;
        }
    });
});

正如我上面提到的，_. template（）工作得很好。当模板输出直接分配给this.el.innerHTML时，TD元素被剥离。我不确定问题是什么，但这会绕过它。

感谢，麦克

下划线模板无法生成TD元素

2 个答案: