2011-01-18 5 views
5

현재 4 개의 템플릿이있는 단일 HTML 페이지가 있으며 더 많은 HTML 페이지가 있습니다. 템플릿을 다른 파일에 넣고 "가져 오기"할 수 있습니까? .js 파일에서 정의 할 수 있습니까?jQuery 템플릿 - 어디에 넣어야합니까?

나는 jQquery 템플릿 플러그인을 사용하고 있습니다 : http://api.jquery.com/category/plugins/templates/

내 코드의 예처럼 보인다!

+0

템플릿의 목적은 일반 콘텐츠를 별도의 파일로 분리 할 수 ​​있다고 생각 했습니까? 어떤 템플릿 엔진을 사용하고 있으며, 코드는 어떻게 생겼으며 지금까지 무엇을 시도 했습니까? – jmort253

+0

@ jmort253 질문에 대한 답변을 업데이트했습니다. – LDK

답변

5

나는 대부분이 답변의 스핀에 동의 : Where to keep html templates? 당신은 이미 잘하고있어 그 이유는 KISS 원칙 때문입니다.

최종 템플릿 수에 따라 (더 많이 언급 했음) 메인 페이지에서 템플릿을 분리 할 수 ​​있습니다. 이것에 대한 몇 가지 이유가 있습니다.

또 하나의 이유는 키스 원리입니다. 템플릿이 너무 많으면 소스 코드를 탐색하기가 어려울 수 있습니다. 귀하의 편집자 또는 IDE가 이미이 문제를 다루었을 수도 있습니다. 그렇지 않은 경우 서식 파일을 별도의 파일로 저장하는 것이 좋습니다.

다른 이유는 성능 때문입니다. 템플릿없이 HTML 파일을 단독으로 게재하면 페이지가 클라이언트에 도착하여 훨씬 빨리 렌더링을 시작합니다. 또한 클라이언트가 일부 템플리트를 캐시하고 변경할 때만 새 템플리트를로드하도록 할 수 있습니다. 그러면 사이트 방문이 훨씬 빨라집니다.

성능이 특히 중요 할 경우 두 가지 방법을 혼합하여 고려할 수 있습니다. 메인 HTML 페이지에는 페이지의 기본 구조를 모아 놓은 필수 템플릿이 포함됩니다.그런 다음 선택적 템플릿은 페이지가로드 된 후 또는 필요할 때 바로 가져올 수 있습니다. 필수 템플리트를 포함 시키려면 서버 측 템플리트를 사용할 수 있습니다.

원래의 질문에 관해서는, 어디에 저장해야하는지에 관해서는, 나는 당신이 어디서나 이해할 수있는 곳에 두어야한다고 말합니다. 그런 다음 템플릿을 빌드하고 가져 오는 방법에 대한 정보는 Dave Ward's article on using external templates with jQuery templates을 참조하십시오.

// Asynchronously our PersonTemplate's content. 
$.get('PersonTemplate.htm', function(template) { 

    // Use that stringified template with $.tmpl() and 
    // inject the rendered result into the body. 
    $.tmpl(template, person).appendTo('body'); 
}); 

그런 다음, An Introduction to jQuery Templates, by Stephen Walther을보고 "원격 템플릿"섹션으로 이동 : 다음 코드의 중요한 조각이다. 그는 템플릿을 한 번만 가져 와서 컴파일하지만 여러 번 렌더링 할 수있는 예를 보여줍니다. 다음은 필수 스 니펫입니다.

// Get the remote template 
$.get("ProductTemplate.htm", null, function (productTemplate) { 

    // Compile and cache the template 
    $.template("productTemplate", productTemplate); 

    // Render the products 
    renderProducts(0); 
}); 

function renderProducts() { 
    // Get page of products 
    var pageOfProducts = products.slice(pageIndex * 5, pageIndex * 5 + 5); 

    // Used cached productTemplate to render products 
    $.tmpl("productTemplate", pageOfProducts).appendTo("#productContainer"); 
} 
2

체크 아웃이 스택 오버플로 질문, 여기 예제의 많음이있다 편집 : 아마도 오래된 또한 Recommended JavaScript HTML template library for JQuery?

, 여기에 외부 템플릿 파일 사용에 대한 최근 기사입니다 : http://encosia.com/2010/10/05/using-external-templates-with-jquery-templates/

+0

질문과 대답이 오래 되었기 때문에 첫 번째 링크는 권하지 않습니다. jQuery 자체가 제공하는 최신 템플릿 플러그인을 포함하지 않을만큼 충분히 오래된 플러그인입니다. –

0

나는 .NET을 사용하지 않는 경우 도움이 될지 모르겠다. 하지만 같은 문제가 난 그냥 할 몇 가지 코드를 썼다 :

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fJqueryTemplate.cs

이 것은 기본적으로 그냥 경로로 이동하고 스크립트 유형을 복사하여 모든 HTML 파일을 붙여 부착 = "텍스트를/x-jquery-tmpl " 부분이 있습니다.

http://htmldeploy.codeplex.com/SourceControl/changeset/view/228d0905a46b#src%2fHtmlDeploy%2fMasterPage.cs

내가 싫어하는 :이 더욱 자동해야하는 경우

, 여기에 몸 html로/영문 파일의에 템플릿을 추가 다른 코드는 필요한 외부 HTTP 요청의 양 때문에 외부 템플리트 방법. 이상적으로는 페이지에 한 번만 다운로드하고 템플릿을 잊어 버릴 수 있습니다. 당신이 Asp.net를 사용하는 경우, 당신은

그것이 치

도움이 희망 MasterPage :이 넣을 수

관련 문제