web-dev-qa-db-ja.com

jQuery +クライアント側テンプレート=「構文エラー、認識できない式」

JQueryを1.8.3から1.9に更新したところ、突然クラッシュし始めました。

これは私のテンプレートです：

<script type="text/template" id="modal_template">
    <div>hello</div>
</script>

これは私がそれを読む方法です：

modal_template_html = $("#modal_template").html();

これは、jQueryオブジェクトに変換する方法です（jQueryメソッドを使用する必要があります）。

template = $(modal_template_html);

...そしてjQueryがクラッシュします！

エラー：構文エラー、認識できない式：<div> hello </ div>

slice.call（docElem.childNodes、0）[0] .nodeType;

jquery-1.9.0.js（3811行目）

ただし、テンプレートをプレーンテキスト変数として宣言すると、再び機能し始めます。

var modal_template_html = '<div>hello</div>';

誰でも私がこれを理解するのを助けることができますか？

UPDATE：Jqueryチームは聞いた 変更 1.10で正常に戻った：

最も大きな変化は、$（）でHTML処理の基準を緩和したことです。これにより、バージョン1.9以前のように先頭のスペースと改行が許可されます。

javascriptjquerymustache
59
Evgeny

改行（または「<」以外のもの）で始まる文字列は、jQuery 1.9ではHTML文字列と見なされません

http://stage.jquery.com/upgrade-guide/1.9/#jquery-htmlstring-versus-jquery-selectorstring

121
Evgeny

テンプレートはスペースまたはタブから始まっていると思います。

次のようにjQueryを使用できます。

$($.parseHtml(modal_template_html)[1]);

または、文字列を解析して先頭のスペースを削除します。

$(modal_template_html.replace(/^[ \t]+/gm, ''));
16
Charles

EugeneXaはコメントでそれを言及しましたが、答えに値します：

var template = $("#modal_template").html().trim();

これにより、文字列の先頭から問題のある空白が削除されます。次のように、Mustacheで使用しました。

var markup = Mustache.render(template, data);
$(markup).appendTo(container);
9
Kevin C.

使用できます

var modal_template_html = $.trim($('#modal_template').html());
var template = $(modal_template_html);
4
Eran H.

公式文書として：1.9の時点では、文字列は小なり（ "<"）文字で始まる場合にのみHTMLと見なされます。 Migrateプラグインを使用して、1.9以前の動作を復元できます。

文字列がHTMLであることがわかっているが、HTMLタグではない任意のテキストで始まる場合、jQuery.parseHTML（）に渡すと、マークアップを表すDOMノードの配列が返されます。これからjQueryコレクションを作成できます（例：$($.parseHTML(htmlString))）。これは、たとえばHTMLテンプレートを処理する場合のベストプラクティスと見なされます。 $("<p>Testing</p>").appendTo("body")などのリテラル文字列の単純な使用は、この変更による影響を受けません。

1
voya

私は同じエラーが発生しました：
"構文エラー、認識できない式：//"
JQueryの既知のバグであるため、回避策を検討する必要がありました。
私がしたことは：
「script」タグを「div」に変更しました
そしてangularにこのコードを追加
そしてエラーはなくなりました...

app.run(['$templateCache', function($templateCache) {
    var url = "survey-input.html";
    content = angular.element(document.getElementById(url)).html()
    $templateCache.put(url, content);
}]);
0
Rivki Aizen