문자 그대로 Dom Markup을 프로토 타입 템플릿으로 사용하려면 어떻게해야합니까?

Question

프로토 타입 주형 클래스를 사용하면 값을 문자열 템플릿으로 쉽게 대체 할 수 있습니다. 내 코드에서 템플릿 소스 스트링을 선언하는 대신 DOM에서 소스 문자열을 추출하고 싶습니다.

예를 들어, 내 마크 업에는 요소가 있습니다.

<div id="template1">
  <img src="#{src}" title="#{title}" />
</div>

DIV 요소의 내 함량으로 템플릿을 만들고 싶습니다. 따라서 다음과 같은 것을 시도했습니다.

var template = new Template($('template1').innerHTML);

문제는 Internet Explorer의 innerhtml 표현이 값에 값이없는 경우 속성 값 주위의 따옴표를 생략한다는 것입니다. 나는 또한 사용하려고 시도했다 요소#검사, 그러나 Internet Explorer에서는 요소 / 하위 트리의 비수체 적 표현을 되 찾습니다.

서브 트리의 내용을 템플릿 친화적으로 표현하는 또 다른 방법이 있습니까?

Answer 1

구조를 조정하십시오 :

스크립트를 인라인으로도 할 수도 있습니다.

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

빠른 팁 : 페이지에 알 수없는 컨텐츠 유형이있는 스크립트를 임베딩하는 것 (여기서 경우 - 브라우저는 텍스트/HTML 스크립트를 실행하는 방법을 모릅니다). . 페이지에 템플릿을 몰래 넣을 수있는 완벽한 클로킹 장치입니다. 나는 페이지에 약간의 템플릿이 필요하고 가볍고 빠른 무언가를 원하는 빠른 템플릿이 필요한 빠른 케이스 에이 기술을 사용하고 싶습니다.

그리고 당신은 다음과 같은 스크립트에서 그것을 사용할 것입니다.

var results = document.getElementById("results");
results.innerHTML = tmpl("item_tmpl", dataObject);

Answer 2

내부에 템플릿 소스를 포함시킬 수있는 것 같습니다. textarea a 대신 태그 div 그리고 그것을 사용하여 검색하십시오 Element#value.

확실히 마크 업을 조금 이상하게 만듭니다. 그러나 여전히 디자이너에게는 합리적으로 친숙한 것 같습니다.

또한 Jason이 원래 질문에 대한 의견에서 지적했듯이 img Textarea의 태그는 잘못된 이미지에 대한 가짜 요청을 방지합니다.