자바 스크립트 템플릿 엔진에서 요소 재사용

Question

제 질문은 JS 템플릿 엔진의 작동 방식에 관한 것입니다. 예를 들어

, I는 다음과 같다 템플릿이 있습니다

<div class="my-block"> 
    <h1>{{title}}</h1> 
    <p>{{description}}</p> 
</div> 

... 그리고 데이터 :

{ 
    title: 'Hello', 
    description: 'World' 
} 

... 그것은 어떤 변수에 저장됩니다 DOM 요소로 렌더링 this 같은 (단순히 String replace()와 {{title}} 및 {{description}}을 대체하여 (뭔가) :

<div class="my-block"> 
    <h1>Hello</h1> 
    <p>World</p> 
</div> 

,

이러한 유형의 요소는 한 번에 하나만 존재하지만 그 안에있는 값 (제목 및 설명)은 꽤 자주 변경됩니다.

언제든지 DOM 요소를 만드는 것을 피하고 (.my-block) 기존 요소의 {{title}} 및 {{description}}을 자동으로 대체 할 수 있습니까?

Answer 1

코드에 약간의 마크 업을 추가

<div class="my-block"> 
    <h1 class="slot-a">Hello</h1> 
    <p class="slot-b">World</p> 
</div> 

그런

$('.my-block .slot-a').text(data.title); 
$('.my-block .slot-b').text(data.description); 

Answer 2

각 요소에 .text을 호출하여 모델 값으로 설정하십시오.

Answer 3

(편의상 당신이 원하는대로 사용을 jQuery를 사용)로 업데이트이 이미 허용 대답을 가지고 있지만, 그 사용 제안 있어요 동적 데이터를 삽입하는 jQuery 및 코드 작성 jQuery를 좋아하고 때로는 코드를 작성하는 것이 좋지만 템플릿 사용과 관련하여 좋은 질문입니다. 이를 염두에두고 귀하의 질문에 답변하고 Transparency.js 및 Mustache.js를 사용하여 귀하의 옵션을 보여 드리겠습니다.

DOM에서 요소를 유지 관리하고 템플릿 엔진을 적용하는 데는 두 가지 방법이 있습니다. HTML로 보내고 DOM 기반 템플릿 엔진을 사용하거나 script 태그에 마크 업을 포함시키고 문자열 기반 템플릿 엔진을 사용하여 동적으로 추가 할 수 있습니다.

첫 번째 옵션과 관련하여 Transparency 또는 PURE와 같은 DOM 기반 엔진을 사용하여 템플릿을 적용 할 수 있습니다. 투명성은 실제로 HTML이 이미 DOM에있을 것으로 예상하고 해당 내용을 제자리에서 조작합니다. 간단한 템플릿의 경우 효과적입니다. 마크 업의 요소에 클래스, ID 또는 기타 식별 속성을 추가해야하는 것은 괜찮은지 여부는 개발자가 결정합니다. 이는 단점입니다. 여기에서 설명하는 예는 다음과 같습니다

<div class="my-block" id="myTemplate"> 
    <h1 class="title"></h1> 
    <p class="description"></p> 
</div> 

자바 스크립트 (기대 jQuery를 jQuery와 같은 라이브러리 포함) :

$(function() { 
    var data = { 
     title: 'Hello', 
     description: 'World' 
    }; 

    $('#myTemplate').render(data); 
}); 

HTML (템플릿 와 DOM에 삶의 역할)

다음은 jsFiddle입니다. Transparency.js example

DOM 요소에 ID를 추가하여 DOM 액세스가 조금 더 빨라. 그것은 당신에게 완전히 달려 있습니다.

동적으로 HTML을 DOM에 추가 할 수도 있습니다. 이 경우 템플릿을 다른 방식으로 포함하고 싶을 것입니다. 한 가지 간단한 방법은 type="text/template"과 함께 script 태그를 사용하는 것입니다. 브라우저는이 텍스트를 DOM에 배치하지 않지만 jQuery와 같은 라이브러리를 사용하여 템플리트 용 내용을 추출 할 수 있습니다. 다음은 Mustache.js를 사용하여 이러한 접근법을 보여주는 예제입니다. (script 태그 내에서 템플릿 포함)

HTML :

<div class="my-block" id="myBlock"></div> 

<script type="text/template" id="myTemplate"> 
    <h1>{{ title }}</h1> 
    <p>{{ description }}</p> 
</script> 

자바 스크립트 : 여기

$(function() { 
    var data = { 
     title: 'Hello', 
     description: 'World' 
    }; 

    var template = $('#myTemplate').html(); 

    var html = Mustache.render(template, data); 

    $('#myBlock').html(html); 
}); 

가 jsFiddle입니다 : 두 번째 예에서 Mustache.js example

, 당신은 장소 홀더가 필요합니다 div를 템플릿 문자열로 출력하려면 DOM에 div를 추가하지만, h1 또는 p 요소를 포함하지 않아도됩니다. y가 동적으로 추가됩니다.

각 방법마다 몇 가지 분명한 이점이 있습니다. 필자는 개인적으로 Transparency.js와 그 형제를 좋아하지만보다 단순한 논리가없는 템플릿에서만 작동합니다. 또한 요소에 속성을 추가 할 때주의해야합니다. CSS에서 동일한 속성을 재사용 할 수 있지만 약간의 작업을 시작하면 위험합니다.

Mustache.js도 논리가 없지만 결과 마크 업에 추가 속성을 추가 할 필요는 없으며 이중 중괄호와 함께 Mustache 구문을 사용해야합니다. 그러나 템플릿을 script 태그에 포함해야하거나 Hogan.js와 같은 것을 사용하여 콧수염을 미리 컴파일 해 볼 수도 있습니다.

저는 최근에 출판 한 Github Pages 사이트에서 Jade와 함께 몇 가지 다른 예를 시연했습니다. 페이지에서 템플릿을 바로 볼 수 있으며 원본을보고 JavaScript에서 렌더링 된 모습을 볼 수 있습니다.

링크 : Templating Sandbox

Transparency.js에

더 많은 정보 : Try Transparency

.. 그리고 Mustache.js :