단일 xHttpRequest에서 여러 jQuery 템플릿을 패키지화하는 가장 좋은 방법은 무엇입니까?

Question

업데이트 :이 문제에 을 파고의 또 다른 일 후, 나는 현재 jQuery를 템플릿 LIB는이 작업을 수행하는 방법을 제공하지 않는다는 점을 발견했다. this article 은 좋은 접근 방법을 설명합니다.

이 작업에 대한 추가 의견이 있으면 에 대해 듣고 싶습니다. 위에 링크 된 문서는 반환 된 템플릿 문자열이 이 DOM에 삽입되어야한다고 요구합니다. 마치 이 DOM을 벗어나는 것처럼 보이면 브라우저가 적합하며 브라우저는 이상이어야합니다. 많은 페이지가 복합 템플릿으로 이루어져 있고 이 사용되지 않을 수도 있습니다. 템플릿이 스크립트 태그로 묶여 있기 때문에 템플릿 당 하나의 DOM 항목 만 있습니까?

함께 여러 관련, 상대적으로 작은 템플릿을 결합하는 가장 좋은 방법은 무엇 jQuery template libs를 사용하여 ...의 이 어떤 생각을 들어 보자, 어서? 개별 템플릿마다 단일 <script> 태그가 필요합니까? AJAX를 통해 이러한 템플릿을 동적으로 가져 오는 경우는 어떻습니까? 이러한 템플릿을 어떻게 든 결합 할 수 있습니까?

는 다음과 같은 고려 :

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#titleTemplate"}} 
    <tr class="detail"><td>Director: ${Director}</td></tr> 
</script> 

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${Name}</td></tr> 
</script> 

이제

이 두 템플릿은 매우 밀접하게 관련되어 있기 때문에 (그리고 하나는 다른에 따라 다름)은 하나의 AJAX 호출에 이러한 통합을 이해하고 그들을 모두를 얻을 것 일단. 몇 가지 아이디어가 있지만 공통점/최선의 방법이 있는지 알고 싶습니다. 예를 들면 ... 현재 내가 HTML의 덩어리에 당겨 한 다음 템플릿 HTML의 특정의 peice를 얻기 위해)를 .find을 (수행

var templatePackage = fancyAjaxCalltoGetTemplates(); 

"templatePackage는"다음 다음과 같습니다

<div id="templatePkg"> 
    <div id="movieTemplate"> 
    {{tmpl "#titleTemplate"}} 
     <tr class="detail"><td>Director: ${Director}</td></tr> 
    </div>  

    <div id="titleTemplate"> 
    <tr class="title"><td>${Name}</td></tr> 
    </div> 
</div> 

그때 할 수있는 :

var titleTemplate = jQuery.template('titleTemplate', $(templatePackage).find('#titleTemplate')); 

및

var movieTemplate = jQuery.template('movieTemplate', $(templatePackage).find('#movieTemplate')); 

... 당신의 생각을 알려주세요. 당신은 무엇을 할 것입니까?

Answer 1

좋아,이 게시물에서 참조한 기사를 읽었습니다. 보시다시피, 그의 방법은 아마도 템플릿 페이지를로드하는 가장 좋은 방법 중 하나 일 것입니다. 내가 싫어할 수있는 유일한 점은 비동기 문제인데, 특히 비동기식 문제입니다. 비동기 get 반환하기 전에 몇 가지 템플릿을 즉시 수행해야하는 경우 ... 뭔가 반환하기 전에 발생할 수있는 바인딩 문제가 더하기. 여러 프로젝트에서 나는 그의 "고대"SSI (서버 측 포함)를 사용했던,하지만 난 그냥 더 쉽게 같은 것을 사용 : 당신이 태그를 배치 할 위치 당신은 어디 넣을 수

<% Response.WriteFile("this_page_template_file.html"); %>

. 그가 말했듯이 필요한 템플릿 만 넣거나 두 개의 템플릿을 포함 할 수 있습니다. 하나는 일반적으로 사용되는 "기본"템플릿이고 두 번째 템플릿 참조는 템플릿 참조 {{tmpl}}을 가진 페이지 고유 템플릿입니다. .

답변에 근접합니까? ;-)

Answer 2

[우선, 좋은 질문입니다. 나는이 주제를 좋아한다]

나는 "jquery-template-libs"플러그인에 대한 경험이 없지만 jQuery로 거의 표준이되어 가벼운 자바 스크립트 템플릿 플러그인이있다. JTL, 콧수염보다 작업에 적합 :

https://github.com/janl/mustache.js

그것은 본질적으로 다른 내 작은 템플릿을 포함하는 방법이다 이는 "부분을"이라고 뭔가 있어요. 어떤 소리가 들리니 당신을 많이 도울 것입니다.

은 그 위에 라이브러리라는 ICanHaz.js가 :

http://icanhazjs.com/

ICanHaz은 기본적으로 템플릿 기능 내장 포함 콧수염을 확장하고 매우 잘 작동합니다.

콧수염/ICanHaz를 사용하면 변수, json 호출 또는 태그를 사용하여 템플릿을 추가 할 수 있습니다. 너의 선택이야.

Answer 3

나는 이것이 오래된 질문이지만, Closure-Templates을보고 싶을 수도 있습니다. 이들은 각 사용자의 브라우저에서 런타임이 아닌 컴파일 타임에 JavaScript로 컴파일되는 이점을 제공하여 사용자가 원하는 기능을 제공합니다.

만약 당신이 그들을 사용하기로 결정한다면, 나는 그것을 구축하기 위해 plovr을 사용할 것을 제안 할 것입니다.

Answer 4

DOM에 삽입하지 않으면 템플릿을 캐시 할 수 없다는 전제를 제외하고는 업데이트 된 참조 문서가 마음에 들었습니다. jQuery.tmpl documentation,에서

", 재사용 명명 된 템플릿을 만들 수 $.template(name, markup)를 사용 (오히려 페이지에서 인라인 마크 업에서 제외) 문자열에서 얻어진 마크 업을 사용하는 경우 템플릿을 캐시하려면. jQuery.template()를 참조하십시오."

이것을 사용하면 DOM을 깨끗하게 유지하면서 필요한만큼 많은 템플릿을 한 번에로드 할 수있는 자바 스크립트 템플릿 관리 시스템을 구축 할 수 있습니다. 클라이언트에서 이름을 기준으로 템플릿 객체의 해시를 유지합니다. 현재 자바 스크립트 패턴을 기반으로 좋아하는 개체를 사용할 수 있지만, 나는 구조가 이렇게 될 수 있다고 생각합니다 :이 같은 HTML 생성하는 템플릿을 사용하여 다음

templates[templateName] = { 
    templateMarkup: markupFromServer, 
    loadedAt: Date.now(), 
    compiledTemplateFunction: jQuery.template(templateName, markupFromServer) 
} 

: 다음

templates['unique-name'].compiledTemplateFunction(inputData) 

을를 구축 LO에 $.get('/TemplateManagement/Render', arrayOfTemplateNamesToLoad, loadManyTemplatesSuccess) : 당신이 같은 요청을 할 수 있도록

function unload(templateName) { 
    delete templates[templateName]; 
    delete jquery.template[templateName]; 
} 

가 가장 중요한 것은, 당신이 지금 여러 템플릿을 저장하는 방법이 있습니다 메모리를 확보하는 메커니즘을 언로드 한 번에 여러 개의 템플릿을 광고하십시오. 우리가 필요로하는 것은 콘트롤러 TemplateManagement입니다.이 콘트롤러는 템플릿 이름의 배열을 입력으로 받아 템플리트 이름과 그 마크 업과 쌍을 이루는 JSON을 리턴합니다. 이 작업을 수행하는 데는 몇 가지 방법이 있지만 가장 편리한 방법은 각 템플릿에 대한 부분 뷰를 정의하는 것입니다. ASP에서.NET MVC 3에서 this technique 및 RenderPartial을 사용하여 각 템플릿의 마크 업을 JSON 응답으로 내보낼 수 있습니다. 부분 뷰의 이름을 템플릿과 동일하게하거나 사용자 정의 방식으로 이름을 매핑 할 수 있습니다.