0

私は Handlebars.js と jquery を使用して HTML テンプレートを取得し、レンダリングしています。さまざまなブラウザー (IE10、IE9、FF、Safari、Chrome) では、これは完全に機能します。

ただし、IE8 を使用している場合、これはまったくうまく機能しません。入力フィールドを含むフォームをレンダリングしようとしています。フィールドはページに表示されますが、value 属性は別の属性で埋められます。

例:

<input id="lastName" autocomplete="off" required="" value="name=lastName"/>

そして、私は期待します：

<input id="lastName" autocomplete="off" required="" value="" name="lastName" />

テンプレートでは、これは次のようになります":

<input id="lastName" autocomplete="off" required="" value="{{lastName}}" name=lastName/>

これは、ハンドルバーによってロードする必要がある変数 lastName が空の場合にのみ発生します。この変数が空でない場合、この変数が読み込まれ、次のように正しい html が表示されます。

<input name="lastName" id="lastName" autocomplete="off" required="" value="Plaap"/>

ファイルのコンパイルが実際に問題であることがわかりました。コンパイルされたバージョンの属性は、二重引用符を失っているようです。

ページのコンパイル済みバージョンに警告すると、これは IE8 で div がどのように見えるかです。

 <INPUT id=lastName value= name=lastName autocomplete="off" required>

これは、IE8 の HTML では最終的に次のようになります。

  <input id="lastName" autocomplete="off" required="" value="name=lastName"/>

Firefox で同じアラートを見ると、同じ入力が次のようになります。

  <input id="lastName" name="lastName" autocomplete="off" required="" value="" type="text">

テンプレートをロードするスクリプトは次のとおりです。

 var htmlSource = $(data).html();
 var template = Handlebars.compile(htmlSource);

 //fill template with object or ''
 var compiled = template(OF.address.attributes);
 alert(compiled);

 //now place the completely compiled html into the page
 that.$el.html(compiled);

ここにいる誰かが以前にこの問題を抱えていた、またはこれを防ぐ方法を知っていますか?

4

1 に答える 1

1

数時間解決策を見つけた後、次のスクリプトを見つけました: innerXHTML

これは完全に機能し、トリックを行います。IE8 の不良フィールドはもうありません。

于 2013-10-10T12:31:14.023 に答える