Question

I’m having a very funky problem with Underscore.js templates. In all browsers but IE 9 the template i use generates HTML markup as designed, but in IE 9 it doesn’t. Here is the template:

, 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>')

In FireFox, Safari and Chrome I get something like:

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

In IE 9 I get:

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

Notice that the contents of the TD elements are generated, but the TD opening and closing tags are missing. We use a jQuery selector to get the text of the last TD in the TR.

Here is the JavaScript involved:

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

This is the ColumnDisplayView.js file:

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

This has really get us stumped and any help would be greatly appreciated.

thanks,

Mike

It was suggested that changing tagname to tagName in ColumnDisplayView.js would solve the problem. It didn’t affect it at all. Here is some console output:

>> __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 is the value returned by _.template(), so the template is working fine.

>> this.el.tagName 
"TR" 

The el.tagName is TR, so adding the _.template() output should be fine.

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

When the _.template() output is assigned to el.innerHTML the TD tags are stripped.

Answer 1

Thanks for the responses Jan. I finally fixed the problem by using jQuery to set the inner html of the element. Here is the code that works.

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

As I mentioned above, the _.template() worked just fine. The TD elements got stripped when the template output was assigned directly to this.el.innerHTML. I’m not sure what the issue was, but this circumvents it.

thanks,
Mike