jQuery + 클라이언트 측 템플릿 = "구문 오류, 인식 할 수없는 표현"

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

아무도 이것을 알아 내도록 도와 줄 수 있습니까?

업데이트 : Jquery 팀 은 1.10에서 상황을 듣고 정상으로 다시 변경 했습니다.

가장 큰 변화는 $ ()에서 HTML 처리 기준을 완화하여 버전 1.9 이전과 마찬가지로 선행 공백과 줄 바꿈을 허용했다는 것입니다.

---

줄 바꿈으로 시작하는 문자열 (또는 "<"이외의 문자열)은 jQuery 1.9에서 HTML 문자열로 간주되지 않습니다.

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

---

템플릿이 공백이나 탭으로 시작하는 것 같습니다.

다음과 같이 jQuery를 사용할 수 있습니다.

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

또는 문자열을 구문 분석하여 시작 부분의 공백을 제거하십시오.

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

---

EugeneXa는 의견에서 언급했지만 대답 할 가치가 있습니다.

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

이렇게하면 문자열 시작 부분에서 문제가되는 공백이 제거됩니다. 다음과 같이 Mustache와 함께 사용했습니다.

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

---

당신이 사용할 수있는

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

---

공식 문서 : 1.9부터 문자열은보다 작은 ( "<") 문자로 시작하는 경우에만 HTML로 간주됩니다. Migrate 플러그인을 사용하여 1.9 이전 동작을 복원 할 수 있습니다.

문자열이 HTML로 알려져 있지만 HTML 태그가 아닌 임의의 텍스트로 시작할 수있는 경우, 마크 업을 나타내는 DOM 노드의 배열을 반환하는 jQuery.parseHTML ()에 전달합니다. 여기에서 jQuery 컬렉션을 만들 수 있습니다 (예 : $($.parseHTML(htmlString)). 이는 예를 들어 HTML 템플릿을 처리 할 때 모범 사례로 간주됩니다. 이와 같은 리터럴 문자열의 간단한 사용은 $("<p>Testing</p>").appendTo("body")이 변경의 영향을받지 않습니다.

---

동일한 오류가 발생했습니다.
"Syntax error, unrecognized expression : //"
JQuery에서 알려진 버그이므로 해결 방법을 생각해야했습니다
.
제가 한 것은 "script"태그를 "div"로 변경
하고 다음에 추가했습니다. 이 코드를 각도로
만들고 오류가 사라졌습니다 ...

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

참고URL : https://stackoverflow.com/questions/14347611/jquery-client-side-template-syntax-error-unrecognized-expression