jQuery 템플릿 엔진 [닫기]

클라이언트 쪽을 사용할 템플릿 엔진을 찾고 있습니다. 나는 jsRepeater 및 jQuery Templates와 같은 몇 가지를 시도 해왔다. FireFox에서는 정상적으로 작동하는 것처럼 보이지만 HTML 테이블 렌더링과 관련하여 IE7에서는 모두 고장난 것처럼 보입니다.

또한 MicrosoftAjaxTemplates.js ( http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766 )를 살펴 보았지만 동일한 문제가 있음이 밝혀졌습니다.

다른 템플릿 엔진에 대한 조언이 있습니까?

jQuery로 Rick Strahl의 포스트 클라이언트 템플릿을 확인하십시오 . 그는 jTemplates를 탐구하지만 John Resig의 마이크로 템플릿 솔루션에 대한 더 나은 사례를 제시 하고 일부를 개선합니다. 좋은 비교, 많은 샘플.

이것에 대해 약간의 연구를했고 jquery-tmpl을 사용할 것 입니다. 왜?

1. John Resig가 작성했습니다.
2. 핵심 jQuery 팀은 "공식"플러그인으로 유지 관리합니다. 편집 : jQuery 팀은이 플러그인을 더 이상 사용하지 않습니다.
3. 단순성과 기능 사이의 완벽한 균형을 유지합니다.
4. 그것은 매우 깨끗하고 잘 생각 된 구문을 가지고 있습니다.
5. 기본적으로 HTML로 인코딩됩니다.
6. 확장 성이 뛰어납니다.

더 여기 : http://forum.jquery.com/topic/templating-syntax

jQote : http://aefxx.com/jquery-plugins/jqote/

누군가 Resig의 마이크로 템플릿 솔루션을 가져 와서 jQuery 플러그인으로 패키지했습니다.

나는 Resig가 자신을 공개 할 때까지 이것을 사용할 것입니다.

팁 주셔서 감사합니다, ewbi.

jQuery Nano :

템플릿 엔진

기본 사용법

다음 JSON 응답이 있다고 가정합니다.

data = {
  user: {
    login: "tomek",
    first_name: "Thomas",
    last_name: "Mazur",
    account: {
      status: "active",
      expires_at: "2009-12-31"
    }
  }
}

당신은 할 수 있습니다:

nano("<p>Hello {user.first_name} {user.last_name}! Your account is <strong>{user.account.status}</strong></p>", data)

그리고 당신은 준비 문자열 :

<p>Hello Thomas Mazur! Your account is <strong>active</strong></p>

테스트 페이지 ...

jQuery-tmpl은 jQuery 1.5부터 jQuery 코어에 있습니다.

http://blog.jquery.com/2010/10/04/new-official-jquery-plugins-provide-templating-data-linking-and-globalization/

공식 문서는 다음과 같습니다.

http://api.jquery.com/category/plugins/templates/

편집 : 그것은 jQuery 1.5에서 제외되었으며 이제 jQuery UI 팀에 의해 조정될 것입니다. 곧 jQuery UI 그리드의 종속성이 될 것입니다.

http://blog.jquery.it/2011/04/16/official-plugins-a-change-in-the-roadmap/

특정 문제를 어떻게 처리하는지 확실하지 않지만 PURE 템플릿 엔진도 있습니다.

그것은 당신이 "최고"를 정의하는 방법에 따라 달라, 내 게시물을 참조하십시오 여기에 주제에

가장 빠른 것을 찾으면 여기에 좋은 벤치 마크 가 있습니다 .DoT가 승리하고 다른 모든 사람들을 뒤에 남겨 둡니다.

가장 공식적인 JQuery 플러그인을 찾고 있다면 여기에 내가 찾은 것이 있습니다.

1 부 : JQuery 템플릿

베타 공식 JQuery 템플릿 플러그인은 http://api.jquery.com/category/plugins/templates/입니다.

그러나 얼마 전에 베타 버전으로 유지하기로 결정한 것 같습니다 ...

참고 : jQuery 팀은이 플러그인을 베타 버전으로 사용하지 않기로 결정했습니다. 더 이상 적극적으로 개발 또는 유지 관리되지 않습니다. 적절한 대체 템플릿 플러그인이 준비 될 때까지 문서는 참고 용으로 여기에 남아 있습니다.

파트 II : 다음 단계

새로운 로드맵은 플러그인의 새로운 세트를 목표로하는 것, JSRender (DOM의 독립 심지어 JQuery와 템플릿 렌더링 엔진) 및 JSViews 바인딩 및 관찰자 / 관찰 패턴 구현 멋진 데이터가

여기 주제에 대한 블로그 게시물입니다

http://www.borismoore.com/2011/10/jquery-templates-and-jsviews-roadmap.html

그리고 여기에 최신 소스가 있습니다

• JSViews https://github.com/BorisMoore/jsviews
• JSRender https://github.com/BorisMoore/jsrender

기타 자료

• http://www.slideshare.net/BorisMoore/jsviews-next-generation-jquery-templates 주제에 대한 멋진 프레젠테이션

• 실무 데모 : http://borismoore.github.com/jsviews/demos/index.html

아직 베타 버전은 아니며 로드맵 항목이지만 템플릿 및 UI 바인딩의 공식 JQuery / JQueryUI 확장이 될 수있는 좋은 후보 인 것 같습니다.

어리석은 사람 일뿐입니다 ^^

// LighTest TPL
$.tpl = function(tpl, val) {
    for (var p in val)
        tpl = tpl.replace(new RegExp('({'+p+'})', 'g'), val[p] || '');
    return tpl;
};
// Routine...
var dataObj = [{id:1, title:'toto'}, {id:2, title:'tutu'}],
    tplHtml = '<div>N°{id} - {title}</div>',
    newHtml    = '';
$.each(dataObj, function(i, val) {
     newHtml += $.tpl(tplHtml, val);
});
var $newHtml = $(newHtml).appendTo('body');

http://jsfiddle.net/molokoloco/w8xSx/ ;)

이것은 jsquery와 관련이 없지만 다음은 Google이 공개 소스로 출시 한 JS 기반 템플릿 라이브러리입니다.

http://code.google.com/p/google-jstemplate/

이를 통해 DOM 요소를 템플릿으로 사용할 수 있으며 다시 입력 할 수 있습니다 (템플릿 렌더링의 출력은 여전히 ​​다른 데이터 모델로 다시 렌더링 할 수있는 템플릿 임).

다른 사람들은 jquery-tmpl을 지적했으며 그 대답을 찬성했습니다. 그러나 github 포크를 살펴보십시오.

중요한 수정 사항과 흥미로운 기능도 있습니다. http://github.com/jquery/jquery-tmpl/network

John Resig는 자신의 블로그에 게시 한 것을 가지고 있습니다. http://ejohn.org/blog/javascript-micro-templating/

.NET Framework 2.0 / 3.5에서 작업하는 경우 http://JsonFx.net에 의해 구현 된 JBST를 살펴보십시오 . 여기에는 친숙한 JSP / ASP 구문이 있지만 런타임시 구문 분석 할 필요가없는 소형 캐시 가능 템플리트를 위해 빌드 타임에 사전 컴파일되는 클라이언트 측 템플릿 솔루션이 있습니다. 템플릿 자체가 순수한 JavaScript로 컴파일되므로 jQuery 및 기타 JavaScript 라이브러리와 잘 작동합니다.

jtemplates jquery pluging을 사용했지만 성능이 실제로 좋지 않았습니다. 성능이 훨씬 좋은 trimpath ( http://code.google.com/p/trimpath/wiki/JavaScriptTemplates ) 로 전환했습니다 . IE7 또는 FF와 관련된 문제를 발견하지 못했습니다.

매우 가벼운 작업의 경우 jquery-tmpl이 적합하지만 경우에 따라 데이터 자체를 포맷하는 방법을 알고 있어야합니다 (나쁜 것!).

더 완전한 기능을 갖춘 템플릿 플러그인을 찾고 있다면 Orange-J 제안 합니다. Freemarker에서 영감을 받았습니다. 그렇지 않으면 템플릿 내의 템플릿을 포함하여 객체 및 배열, 인라인 자바 스크립트를 반복하고 출력 (maxlen, wordboundary, htmlentities 등)에 대한 우수한 서식 옵션이있는 경우를 지원합니다.

아, 그리고 쉬운 구문.

템플릿 디자인 방법을 조금 생각하고 싶을 수도 있습니다.

나열된 템플릿 솔루션 (jQote, jquery-tmpl, jTemplates)의 많은 문제 중 하나는 HTML에 HTML 이외의 언어를 삽입해야하므로 HTML 도구 또는 HTML 디자이너의 개발 프로세스에서 어려움을 겪을 수 있다는 것입니다 . 나는 개인적으로 그 접근법의 느낌이 마음에 들지 않지만 장점과 단점이 있습니다.

일반 HTML을 사용하는 다른 템플릿 접근 방식 클래스가 있지만 요소 속성, CSS 클래스 또는 외부 매핑으로 데이터 바인딩을 표시 할 수 있습니다.

녹아웃 은이 접근 방식의 좋은 예이지만 직접 사용하지는 않았으므로 다른 사람들이 좋아하는지 아닌지를 결정하기 위해 투표에 남겨두고 있습니다. 적어도 더 많은 시간을 가질 때까지.

다른 답변으로 나열된 PURE 는이 방법의 또 다른 예입니다.

참고로 chain.js를 볼 수도 있지만 원래 릴리스 이후 많이 업데이트되지 않은 것 같습니다. 이에 대한 자세한 배경은 http://javascriptly.com/2008/08/a-better-javascript-template-engine/ 을 참조하십시오 .

웹 사이트 에서 John Resig의 템플릿 엔진 을 사용하는 Dropbox . 그들은 dropbox 의이 js 파일 에서 확인할 수있는 약간 수정했습니다 . 이 파일에서 tmpl을 검색하면 템플릿 엔진 코드가 작성됩니다.

감사. 누군가에게 도움이되기를 바랍니다.

현재 다중 HTML 템플릿 프레임 워크를 사용하고 있습니다. 이 프레임 워크를 사용하면 DOM에서 템플릿 데이터를 훨씬 쉽게 가져올 수 있습니다. 또한 훌륭한 MVC 모델링.

http://www.enfusion-framework.org/ (샘플을보십시오!)

Beebole의 PURE를 다시 작성했습니다-jquery pure html templates- https ://github.com/mpapis/jquery-pure-templates

주로 jquery 선택기를 사용하여 훨씬 더 자동으로 렌더링 할 수 있어야합니다. HTML에 멋진 것을 넣을 필요가없는 것이 더 중요합니다.