0

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

, manageColumnsTableTemplate: _.template(
'<td class="padss-glyphs">▣&lt;/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">▣&lt;/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 
"▣&lt;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 标签被剥离。

4

2 回答 2

1

您应该在 ColumnDisplayView.js 中tagname替换为tagName

于 2012-10-01T21:10:25.427 回答
0

感谢一月的回复。我终于通过使用 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 元素被剥离。我不确定问题是什么，但这绕过了它。

谢谢，迈克

于 2012-10-02T18:00:32.523 回答