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

1月の回答に感謝します。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 に答える